{"id":15319132,"url":"https://github.com/zoontek/react-router-with-chicane","last_synced_at":"2026-02-23T12:04:06.990Z","repository":{"id":50340662,"uuid":"518797987","full_name":"zoontek/react-router-with-chicane","owner":"zoontek","description":null,"archived":false,"fork":false,"pushed_at":"2022-07-28T11:58:30.000Z","size":32,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-25T06:36:45.152Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zoontek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-28T10:19:34.000Z","updated_at":"2023-03-13T12:55:42.000Z","dependencies_parsed_at":"2022-08-20T15:01:15.517Z","dependency_job_id":null,"html_url":"https://github.com/zoontek/react-router-with-chicane","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zoontek/react-router-with-chicane","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-router-with-chicane","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-router-with-chicane/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-router-with-chicane/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-router-with-chicane/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zoontek","download_url":"https://codeload.github.com/zoontek/react-router-with-chicane/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-router-with-chicane/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29742182,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T09:03:51.676Z","updated_at":"2026-02-23T12:04:06.955Z","avatar_url":"https://github.com/zoontek.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Router + @swan-io/chicane example\n\nThis repository is an example on how you can incrementaly adopt [`@swan-io/chicane`](https://github.com/swan-io/chicane) in your React Router codebase, in order to add type safety on your internal links creation.\n\n👉 Note that [`@swan-io/chicane`](https://github.com/swan-io/chicane) is a fully featured router that provides type safety on link creation **and** on route matching (and other cool features!). This repository give you three examples of the same codebase so you can briefly compare the approaches:\n\n- [Example with react-router-dom + @swan-io/chicane](https://github.com/zoontek/react-router-with-chicane/tree/react-router-and-chicane/src) (type safe links creation)\n- [Example with react-router-dom only](https://github.com/zoontek/react-router-with-chicane/tree/react-router-only/src) (no type safety)\n- [Example with @swan-io/chicane only](https://github.com/zoontek/react-router-with-chicane/tree/chicane-only/src) (type safe links creation and type safe route matching)\n\n### How to adopt @swan-io/chicane incrementaly in your React Router codebase\n\nFirst create a `Router.ts` file:\n\n```ts\nimport { createRouter } from \"@swan-io/chicane\";\n\n// Here we list all our application pages\nconst routes = {\n  Home: \"/\",\n  Teams: \"/teams?:created\", // chicane support search / hash params declaration\n  Team: \"/teams/:teamId\",\n  NewTeam: \"/teams/new\",\n  // Note that chicane \"createGroup\" works perfectly here! (for routes nesting)\n} as const;\n\n// We avoid exporting chicane routing methods\nconst { useRoute, push, replace, ...rest } = createRouter(routes);\n\n// We exports all the link creation methods\nexport const links = rest;\n\n// We export paths (without search and hash params, as react-router doesn't support them)\nexport const paths = (Object.keys(routes) as (keyof typeof routes)[]).reduce(\n  (acc, key) =\u003e ({ ...acc, [key]: routes[key].replace(/[?#].*/, \"\") }),\n  {} as Record\u003ckeyof typeof routes, string\u003e\n);\n```\n\nThen, replace your React Router Route component paths declarations:\n\n```tsx\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\nimport { paths } from \"./Router\"\n\n\u003cBrowserRouter\u003e\n  \u003cRoutes\u003e\n    {/* we use paths from Router.ts */}\n    \u003cRoute path={paths.Home} element={\u003cHome /\u003e} /\u003e\n    \u003cRoute path={paths.Teams} element={\u003cTeams /\u003e} /\u003e\n    \u003cRoute path={paths.Team} element={\u003cTeam /\u003e} /\u003e\n    \u003cRoute path={paths.NewTeam} element={\u003cNewTeam /\u003e} /\u003e\n  \u003c/Routes\u003e\n\u003c/BrowserRouter\u003e\n```\n\nFinally, enjoy safe link creation!\n\n```tsx\nimport { Link, useNavigate } from \"react-router-dom\";\nimport { links } from \"./Router\"\n\nconst SomePage = () =\u003e {\n  const navigate = useNavigate();\n\n  return (\n    \u003c\u003e\n      \u003cLink to={links.Home()}\u003eBack to home page\u003c/Link\u003e✨\n\n      \u003cLink to={links.Team({ teamId: \"foo\" })}\u003eTeam foo page\u003c/Link\u003e\n      \u003cLink to={links.Team({ teamId: \"bar\" })}\u003eTeam bar page\u003c/Link\u003e\n\n      \u003cbutton\n        onClick={(event) =\u003e {\n          event.preventDefault();\n          navigate(links.Teams({ created: \"baz\" }), { replace: true });\n        }}\n      \u003e\n        Click me\n      \u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n✨ Once your links are type safe, you can start migrating your [routes matching](https://swan-io.github.io/chicane/matching-some-routes).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoontek%2Freact-router-with-chicane","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzoontek%2Freact-router-with-chicane","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoontek%2Freact-router-with-chicane/lists"}