{"id":13526917,"url":"https://github.com/palmerhq/router-suspense","last_synced_at":"2025-05-07T00:06:07.824Z","repository":{"id":96239236,"uuid":"144190431","full_name":"palmerhq/router-suspense","owner":"palmerhq","description":"The suspense-friendly minimalistic sister of React Router 4.","archived":false,"fork":false,"pushed_at":"2018-08-11T22:15:59.000Z","size":126,"stargazers_count":125,"open_issues_count":4,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-07T00:05:57.270Z","etag":null,"topics":["react","react-router","react-suspense","suspense"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/palmerhq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-08-09T18:38:15.000Z","updated_at":"2023-08-15T16:16:02.000Z","dependencies_parsed_at":"2023-03-08T13:00:29.305Z","dependency_job_id":null,"html_url":"https://github.com/palmerhq/router-suspense","commit_stats":{"total_commits":27,"total_committers":2,"mean_commits":13.5,"dds":0.03703703703703709,"last_synced_commit":"b2bcaa7188568783165452eb0f9a7960b25d2f00"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palmerhq%2Frouter-suspense","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palmerhq%2Frouter-suspense/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palmerhq%2Frouter-suspense/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palmerhq%2Frouter-suspense/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/palmerhq","download_url":"https://codeload.github.com/palmerhq/router-suspense/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252788521,"owners_count":21804285,"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-suspense","suspense"],"created_at":"2024-08-01T06:01:37.421Z","updated_at":"2025-05-07T00:06:07.802Z","avatar_url":"https://github.com/palmerhq.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Router Suspense\n\nA suspense-friendly minimalistic sister of React Router.\n\n```\nnpm i router-suspense\n```\n\nAs of now, this is a very basic router that works in async-land. \n\n\n\u003cimg src=\"https://user-images.githubusercontent.com/4060187/43965292-e15935fe-9c8c-11e8-80f5-a369fdbf568d.gif\" width=\"500\" /\u003e\n\n\n## Playing with Suspense\n\nThis router will work in React 15+. However, If you want to play around with suspense features, you'll need to enable suspense somehow. That means either building React yourself. Or, using this handy dandy starter we made.\n\nhttps://github.com/palmerhq/react-suspense-starter\n\n\n## API\n\nThe API is basically the core of React Router 4.\n\n### `\u003cRouter\u003e`\n\nExactly the same as RR4's `\u003cBrowserRouter\u003e`\n\n- `children: React.ReactNode`\n\n```jsx\nimport React from 'react';\nimport { unstable_createRoot as createRoot } from 'react-dom';\nimport { Router } from 'router-suspense';\nimport App from './App';\n\nconst root = createRoot(document.getElementById('app'));\n\nconst render = Comp =\u003e {\n  root.render(\n   \u003cRouter\u003e\n     \u003cComp /\u003e\n   \u003c/Router\u003e\n  );\n};\n\nrender(App);\n```\n\n### `\u003cRoute\u003e`\n\nRender prop component to conditionally render based on the URL. If present, it uses `ReactDOM.unstable_deferredUpdates` to wait for any suspense jazz to happen on the next route before making the transition. \n\n#### Route Props\n\n- `render: ((props) =\u003e React.ReactNode)`: Passes `history`, `location`, `match` as a render prop. Only renders when `path` matches the current location.\n- `path: string` Path to match. Same as RR4.\n- `exact: boolean = false` Same as RR4.\n\n\n```jsx\nimport React from 'react'\nimport { Route, Link } from 'router-suspense'\n\nexport const Nav = () =\u003e (\n  \u003cnav\u003e\n    \u003cLink to=\"/\"\u003eHome\u003c/Link\u003e\n    \u003cLink to=\"/dashboard\"\u003eDashboard\u003c/Link\u003e\n  \u003c/nav\u003e\n)\n\nexport const App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cnav\u003e\n     \u003cLink to=\"/\"\u003eHome\u003c/Link\u003e\n     \u003cLink to=\"/dashboard\"\u003eDashboard\u003c/Link\u003e\n     \u003cLink to=\"/user/123\"\u003eUser\u003c/Link\u003e\n    \u003c/nav\u003e\n    \u003cRoute path=\"/\" exact render={() =\u003e \u003cdiv\u003eHome\u003c/div\u003e} /\u003e\n    \u003cRoute path=\"/dashboard\" exact render={() =\u003e \u003cdiv\u003eDashboard\u003c/div\u003e} /\u003e\n    \u003cRoute path=\"/user/:id\" exact render={({ match }) =\u003e \u003cdiv\u003eUser {match.params.id} \u003c/div\u003e} /\u003e\n  \u003c/div\u003e\n)\n```\n\n### `\u003cLink\u003e`\n\nLink works like React Router 4's. You give it a `path`, it renders an `\u003ca\u003e`, but does a client-side transition by calling `history.push(path)` under the hood.\n\n- `to: string` The relative path to link to\n\n```jsx\nimport React from 'react'\nimport { Link } from 'router-suspense'\n\nexport const Nav = () =\u003e (\n  \u003cnav\u003e\n    \u003cLink to=\"/\"\u003eHome\u003c/Link\u003e\n    \u003cLink to=\"/dashboard\"\u003eDashboard\u003c/Link\u003e\n  \u003c/nav\u003e\n)\n```\n\n### `withRouter(Comp: Component)`\n\nA higher-order component that hooks into Router context. Same as RR4.\n\n```jsx\nimport React from 'react'\nimport { Link } from 'router-suspense'\n\nconst BackButton = ({ history }) =\u003e (\n  \u003cdiv\u003e\n    \u003cbutton onClick={() =\u003e history.goBack()}\u003eBack\u003c/button\u003e\n  \u003c/div\u003e\n)\n\nexport default withRouter(BackButton)\n```\n\n## Inspiration\n\nA lot of this code is taken straight from React Router and React Training's MiniRouter lecture.\n\n## Authors\n\n- Jack Cross ([@crosscompile](https://twitter.com/crosscompile))\n- Jared Palmer ([@jaredpalmer](https://twitter.com/jaredpalmer))\n\n\nCopyright © 2018 The Palmer Group.\n\n---\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpalmerhq%2Frouter-suspense","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpalmerhq%2Frouter-suspense","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpalmerhq%2Frouter-suspense/lists"}