{"id":18441215,"url":"https://github.com/jamesknelson/react-routing-library","last_synced_at":"2025-04-07T22:32:12.133Z","repository":{"id":57343908,"uuid":"283526550","full_name":"jamesknelson/react-routing-library","owner":"jamesknelson","description":"Concurrent routing that grows with your app.","archived":false,"fork":false,"pushed_at":"2020-08-03T10:06:17.000Z","size":493,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T13:20:09.333Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamesknelson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-29T14:50:10.000Z","updated_at":"2024-08-17T20:15:32.000Z","dependencies_parsed_at":"2022-09-12T06:30:39.508Z","dependency_job_id":null,"html_url":"https://github.com/jamesknelson/react-routing-library","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesknelson%2Freact-routing-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesknelson%2Freact-routing-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesknelson%2Freact-routing-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesknelson%2Freact-routing-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamesknelson","download_url":"https://codeload.github.com/jamesknelson/react-routing-library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247741274,"owners_count":20988364,"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":[],"created_at":"2024-11-06T06:35:22.881Z","updated_at":"2025-04-07T22:32:07.118Z","avatar_url":"https://github.com/jamesknelson.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  React Routing Library\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003e\n  Simple, powerful routing that grows with your app.\n\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-routing-library\"\u003e\u003cimg alt=\"NPM\" src=\"https://img.shields.io/npm/v/react-routing-library.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n## Getting Started\n\n```bash\nyarn add react-routing-library\n```\n\n- [**Read the 2-minute primer**](#2-minute-primer)\n\u003c!-- - Why React Routing Library? *(coming soon*)* --\u003e\n\u003c!-- - [View the guided examples \u0026raquo;](./examples) --\u003e\n- [View the API reference \u0026raquo;](./docs/api.md)\n\u003c!-- - Try a Real-world example on CodeSandbox \u0026raquo; *(coming soon)* --\u003e\n\n\n## 2-minute primer\n\n**Your router just is a function.**\n\nWith React Routing Library, a **router** is a function that maps a request to an element.\n\n```ts\ntype Router = (request: RouterRequest) =\u003e ReactNode\n```\n\nYou've seen this before -- its a lot like a React component.\n\n```tsx\nconst router = request =\u003e {\n  switch (request.pathname) {\n    case '/':\n      return \u003ch1\u003eHome\u003c/h1\u003e\n\n    case '/about':\n      return \u003ch1\u003eAbout\u003c/h1\u003e\n\n    default:\n      throw new Error('Not Found')\n  }\n}\n```\n\nOnce you have a router, just pass it to a `\u003cRoutingProvider\u003e`. Then, use a `\u003cContent /\u003e` element to indicate where you want your content to be rendered.\n\n```tsx\nimport { Content, RoutingProvider } from 'react-routing-library'\n\nexport default function App() {\n  return (\n    \u003cRoutingProvider router={router}\u003e\n      \u003cContent /\u003e\n    \u003c/RoutingProvider\u003e\n  )\n}\n```\n\nRouters-as-functions is the underlying secret that makes RRL so powerful. Most of the time though, it's easier to let RRL create router functions for you. For example, the above router could be created with `createPatternRouter()`.\n\n```tsx\nimport { createPatternRouter } from 'react-routing-library'\n\nconst router = createPatternRouter({\n  '/': \u003ch1\u003eHome\u003c/h1\u003e,\n  '/about': \u003ch1\u003eAbout\u003c/h1\u003e\n})\n```\n\nNaturally, your `\u003cContent\u003e` element can be nested anywhere inside the routing provider. This lets you easily add layout elements, for example a site-wide navigation bar. And hey presto -- you've now built a simple app with push-state routing!\n\n[*View this example live at CodeSandbox \u0026raquo;*](https://codesandbox.io/s/rrl-minimal-vsdsd)\n\n```tsx\nimport { Link } from 'react-routing-library'\n\nfunction AppLayout({ children }) {\n  return (\n    \u003c\u003e\n      \u003cheader\u003e\n        \u003cLink to=\"/\"\u003eHome\u003c/Link\u003e\n        \u003cLink to=\"/about\"\u003eAbout\u003c/Link\u003e\n      \u003c/header\u003e\n      \u003cmain\u003e\n        {children}\n      \u003c/main\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default function App() {\n  return (\n    \u003cRoutingProvider router={router}\u003e\n      \u003cAppLayout\u003e\n        \u003cContent /\u003e\n      \u003c/AppLayout\u003e\n    \u003c/RoutingProvider\u003e\n  )\n}\n```\n\n\u003c!--\n\nTODO\n\n## Examples and guides\n\n- [Minimal live example]()\n- [Full real-world live example]()\n\n--- \n\n- [Route parameters guide]()\n- [Not found boundaries guide](./examples/not-found-boundary)\n- [Redirects guide]()\n- [Nested routers guide]()\n- [Nested layouts guide]()\n- [Concurrent mode guide]()\n- [Pre-caching data guide]()\n- [Loading indicators guide]()\n- [Animated transitions guide]()\n- [Authentication guide]()\n- [SSR guide]()\n\n--\u003e\n\n\n## API\n\n[**Components**](/docs/api.md#components)\n\n- [`\u003cRoutingProvider\u003e`](/docs/api.md#routingprovider)\n- [`\u003cContent\u003e`](/docs/api.md#content)\n- [`\u003cLink\u003e`](/docs/api.md#link)\n- [`\u003cNotFoundBoundary\u003e`](/docs/api.md#notfoundboundary)\n\n[**Hooks**](/docs/api.md#hooks)\n\n- [`useContent()`](/docs/api.md#usecontent)\n- [`useIsActive()`](/docs/api.md#useisactive)\n- [`useLink()`](/docs/api.md#uselink)\n- [`useNavigation()`](/docs/api.md#usenavigation)\n- [`usePendingRequest()`](/docs/api.md#usependingrequest)\n- [`useRequest()`](/docs/api.md#userequest)\n\n[**Router helpers**](/docs/api.md#router-helpers)\n\n- [`createAsyncRouter()`](/docs/api.md#createasyncrouter)\n- [`createLazyRouter()`](/docs/api.md#createlazyrouter)\n- [`createPatternRouter()`](/docs/api.md#createpatternrouter)\n- [`createRedirectRouter()`](/docs/api.md#createredirectrouter)\n\n[**Functions**](/docs/api.md#functions)\n\n- [`createHref()`](/docs/api.md#createhref)\n- [`getRoute()`](/docs/api.md#getroute)\n- [`parseHref()`](/docs/api.md#parsehref)\n\n[**Error handling**](/docs/api.md#error-handling)\n\n- [`NotFoundError`](/docs/api.md#notfounderror)\n- [`notFoundRouter`](/docs/api.md#notfoundrouter)\n\n[**Types**](/docs/api.md#types)\n\n- [`Route`](/docs/api.md#route)\n- [`Router`](/docs/api.md#router)\n- [`RouterDelta`](/docs/api.md#routerdelta)\n- [`RouterNavigation`](/docs/api.md#routernavigation)\n- [`RouterRequest`](/docs/api.md#routerrequest)\n- [`RouterResponse`](/docs/api.md#routerresponse)\n\n\n## License\n\nMIT License, Copyright \u0026copy; 2020 James K. Nelson\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesknelson%2Freact-routing-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamesknelson%2Freact-routing-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesknelson%2Freact-routing-library/lists"}