{"id":24650469,"url":"https://github.com/fredericoo/react-router-typesafe","last_synced_at":"2025-10-07T10:30:23.104Z","repository":{"id":181610149,"uuid":"667032057","full_name":"fredericoo/react-router-typesafe","owner":"fredericoo","description":"just the way you wanted React Router to work with TypeScript.","archived":false,"fork":false,"pushed_at":"2024-06-20T20:19:52.000Z","size":290,"stargazers_count":107,"open_issues_count":4,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-19T19:51:32.360Z","etag":null,"topics":["react","react-router","react-router-dom","react-router-dom-v6","router","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/fredericoo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-07-16T12:18:17.000Z","updated_at":"2024-12-17T07:46:03.000Z","dependencies_parsed_at":"2023-09-21T08:58:43.953Z","dependency_job_id":"f523d24d-df92-4252-abc2-1576e50e4449","html_url":"https://github.com/fredericoo/react-router-typesafe","commit_stats":null,"previous_names":["fredericoo/react-router-typesafe","stargaze-co/react-router-typesafe"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredericoo%2Freact-router-typesafe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredericoo%2Freact-router-typesafe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredericoo%2Freact-router-typesafe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredericoo%2Freact-router-typesafe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fredericoo","download_url":"https://codeload.github.com/fredericoo/react-router-typesafe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235614277,"owners_count":19018405,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["react","react-router","react-router-dom","react-router-dom-v6","router","typescript"],"created_at":"2025-01-25T18:15:10.731Z","updated_at":"2025-10-07T10:30:17.734Z","avatar_url":"https://github.com/fredericoo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Router Typesafe\n\nReact Router Typesafe is a minimal (235 bytes gzipped) patch built upon [react-router](https://github.com/remix-run/react-router) to add type-safety via the use of generics. It brings type functionality closer to Remix, the full-stack framework from the same authors.\n\n## Getting Started\n\nInstall the package:\n\n```bash\nnpm install react-router-typesafe\n```\n\nReplace your imports from `react-router` to `react-router-typesafe`:\n\n```diff\n- import { defer, useLoaderData, useActionData } from \"react-router\";\n+ import { defer, useLoaderData, useActionData } from \"react-router-typesafe\";\n```\n\n## Usage\n\n### useLoaderData / useActionData\n\n```tsx\nimport { useLoaderData, useActionData, LoaderFunction, ActionFunction } from 'react-router-typesafe';\n\nconst loader = (() =\u003e ({ message: 'Hello World' })) satisfies LoaderFunction;\n\nconst action = (() =\u003e ({ ok: true })) satisfies ActionFunction;\n\nconst Component = () =\u003e {\n\tconst data = useLoaderData\u003ctypeof loader\u003e();\n\tconst actionData = useActionData\u003ctypeof action\u003e();\n\n\treturn \u003cdiv\u003e{data.message}\u003c/div\u003e;\n};\n```\n\n\u003e **Warning**\n\u003e Do not annotate the type of the loader/action function. It will break the type-safety. Instead rely on either the `satisfies` keyword from Typescript 4.9 onwards, or the `makeLoader` / `makeAction` utilities proveded by this library.\n\n## Utilities\n\n### makeLoader / makeAction\n\nThe `makeLoader` and `makeAction` utils replace the need for the `satisfies` keyword without adding any runtime overhead.\n\n```tsx\nimport { makeLoader, makeAction } from 'react-router-typesafe';\n\nconst loader = makeLoader(() =\u003e ({ message: 'Hello World' }));\n\nconst action = makeAction(() =\u003e ({ ok: true }));\n```\n\n### typesafeBrowserRouter ❇️ NEW\n\nThe `typesafeBrowserRouter` is a wrapper around `createBrowserRoute` that returns a `href` function in addition to the routes.\n\nIt’s easy to incrementally adopt, and you can use `href` anywhere, not just in `\u003cLink\u003e` components.\n\nSet up your routes like this:\n\n```diff\n- import { createBrowserRouter } from \"react-router-dom\";\n+ import { typesafeBrowserRouter } from \"react-router-typesafe\";\n\n- export const router = createBrowserRouter([\n+ export const { router, href } = typesafeBrowserRouter([\n  { path: \"/\", Component: HomePage },\n  { path: \"/projects/:projectId\", Component: ProjectPage },\n]);\n```\n\n- ✅ No need to change your existing `\u003cLink\u003e` components.\n- ✅ URL params are inferred and type-checked.\n- ✅ Supports query params and URL hash\n- ✅ Refactor-friendly: **Rename Symbol** on the route path and it’ll be updated everywhere.\n\nThen use `href` to generate URLs:\n\n```tsx\nimport { Link } from 'react-router-dom';\nimport { href } from './router';\n\nconst ProjectCard = (props: { id: string }) =\u003e {\n\treturn (\n\t\t\u003cLink to={href({ path: '/projects/:projectId', params: { projectId: props.id } })}\u003e\n\t\t\t\u003cp\u003eProject {projectId}\u003c/p\u003e\n\t\t\u003c/Link\u003e\n\t);\n};\n```\n\n## Contributing\n\nFeel free to improve the code and submit a pull request. If you're not sure about something, create an issue first to discuss it.\n\n## Functions\n\n| Status | Utility                 | Before     | After                                                        |\n| ------ | ----------------------- | ---------- | ------------------------------------------------------------ |\n| ✅     | `defer`                 | `Response` | Generic matching the first argument                          |\n|        | `json`                  | `Response` | Serialized data passed in                                    |\n| ✅     | `useLoaderData`         | `unknown`  | Generic function with the type of the loader function passed |\n| ✅     | `useActionData`         | `unknown`  | Generic function with the type of the action function passed |\n| ✅     | `useRouteLoaderData`    | `unknown`  | Generic function with the type of the loader function passed |\n| NEW    | `makeLoader`            |            | Wrapper around `satisfies` for ergonomics                    |\n| NEW    | `makeAction`            |            | Wrapper around `satisfies` for ergonomics                    |\n| NEW    | `typesafeBrowserRouter` |            | Extension of `createBrowserRouter`                           |\n\n## Patched components\n\n| Status | Component | Before                                        | After                                         |\n| ------ | --------- | --------------------------------------------- | --------------------------------------------- |\n| ✅     | `\u003cAwait\u003e` | children render props would be typed as `any` | Generic component makes render props typesafe |\n\n## About\n\nReact Router is developed and maintained by [Remix Software](https://remix.run) and many [amazing contributors](https://github.com/remix-run/react-router/graphs/contributors).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffredericoo%2Freact-router-typesafe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffredericoo%2Freact-router-typesafe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffredericoo%2Freact-router-typesafe/lists"}