{"id":14483679,"url":"https://github.com/atlassian-labs/react-resource-router","last_synced_at":"2025-04-04T18:08:31.786Z","repository":{"id":37354624,"uuid":"266652223","full_name":"atlassian-labs/react-resource-router","owner":"atlassian-labs","description":"Configuration driven routing solution for React SPAs that manages route matching, data fetching and progressive rendering","archived":false,"fork":false,"pushed_at":"2024-03-26T05:48:00.000Z","size":2989,"stargazers_count":195,"open_issues_count":41,"forks_count":23,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-05-03T16:31:43.446Z","etag":null,"topics":["react","router","spa"],"latest_commit_sha":null,"homepage":"https://atlassian-labs.github.io/react-resource-router","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atlassian-labs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"security-assistant.yml","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-25T00:58:46.000Z","updated_at":"2024-05-30T06:34:32.115Z","dependencies_parsed_at":"2024-02-07T03:30:42.479Z","dependency_job_id":"ade0c85e-8762-40ee-a141-033254ec61d7","html_url":"https://github.com/atlassian-labs/react-resource-router","commit_stats":{"total_commits":159,"total_committers":37,"mean_commits":4.297297297297297,"dds":0.7735849056603774,"last_synced_commit":"4be3eddad4f2e9eac52a0935281a0012c9e66a51"},"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassian-labs%2Freact-resource-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassian-labs%2Freact-resource-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassian-labs%2Freact-resource-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassian-labs%2Freact-resource-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atlassian-labs","download_url":"https://codeload.github.com/atlassian-labs/react-resource-router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247103290,"owners_count":20884023,"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","router","spa"],"created_at":"2024-09-03T00:01:59.139Z","updated_at":"2025-04-04T18:08:31.767Z","avatar_url":"https://github.com/atlassian-labs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/84136/83958672-e99bba00-a8b7-11ea-81c7-0397f23e8a04.png\" alt=\"react-resource-router logo\" height=\"150\" /\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003ereact-resource-router\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-resource-router\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-resource-router.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=react-resource-router\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/react-resource-router.svg\" /\u003e\u003c/a\u003e\n  \u003ca href=\"LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-Apache%202.0-blue.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"CONTRIBUTING.md\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nReact Resource Router (RRR) is a configuration driven routing solution for React that manages single page application route matching, data fetching and progressive rendering.\n\n## Why?\n\nReact Resource Router was developed by Atlassian for [Jira](https://www.atlassian.com/software/jira) primarily to improve **performance** and prepare for **compatibility** with React's forthcoming [Concurrent Mode](https://reactjs.org/docs/concurrent-mode-intro.html) on both client and server. You can read more about its development and impact [here](https://www.atlassian.com/engineering/react-resource-router-deep-dive).\n\n### Features\n\n- Fully driven by a static configuration of route objects\n- Each route object contains the following core properties\n  - `path` - the path to match\n  - `component` - the component to render\n  - `resources` - an array of objects containing fetch functions that request the route component's data\n- Data for a route is requested **asynchronously** and **as early as possible**, with the page progressively rendering as the requests resolve. This results in quicker meaningful render times\n- Works on both client and server without having to traverse the React tree\n\n## Usage\n\n### Create your resources\n\nResources describe and provide the data required for your route. This data is safely stored and accessed via the `useResource` hook or `ResourceSubscriber` component.\n\n```js\nimport { createResource } from 'react-resource-router/resources';\nimport { fetch } from '../common/utils';\n\nexport const homeResource = createResource({\n  type: 'HOME',\n  getKey: () =\u003e 'home-resource-key',\n  getData: () =\u003e fetch('https://my-api.com/home'),\n});\n\nexport const aboutResource = createResource({\n  type: 'ABOUT',\n  getKey: () =\u003e 'about-resource-key',\n  getData: () =\u003e fetch('https://my-api.com/about'),\n});\n```\n\n### Create your components\n\nThese are the React components that get rendered for your routes. As mentioned, they can be wired into the state of your resources via the `useResource` hook or `ResourceSubscriber` component.\n\n```js\nimport { useResource } from 'react-resource-router/resources';\nimport { aboutResource, homeResource } from '../routes/resources';\nimport { Loading, Error } from './common';\n\nexport const Home = () =\u003e {\n  const { data, loading, error } = useResource(homeResource);\n\n  if (error) {\n    return \u003cError error={error} /\u003e;\n  }\n\n  if (loading) {\n    return \u003cLoading /\u003e;\n  }\n\n  return \u003cdiv\u003e{data.home.content}\u003c/div\u003e;\n};\n\nexport const About = () =\u003e {\n  const { data, loading, error } = useResource(aboutResource);\n\n  if (error) {\n    return \u003cError error={error} /\u003e;\n  }\n\n  if (loading) {\n    return \u003cLoading /\u003e;\n  }\n\n  return \u003cdiv\u003e{data.about.content}\u003c/div\u003e;\n};\n```\n\n### Create your routes\n\nYour route configuration is the single source of truth for your application's routing concerns.\n\n```js\nimport { Home, About } from '../components';\nimport { homeResource, aboutResource } from './resources';\n\nexport const appRoutes = [\n  {\n    name: 'home',\n    path: '/',\n    exact: true,\n    component: Home,\n    resources: [homeResource],\n  },\n  {\n    name: 'about',\n    path: '/about',\n    exact: true,\n    component: About,\n    resources: [aboutResource],\n  },\n];\n```\n\n### Use the Router\n\nNow that you've set up your resources, components and configuration correctly, all you need to do is mount the Router in your react tree with a `RouteComponent` as a child. It will do the rest!\n\n```js\nimport {\n  Router,\n  RouteComponent,\n  createBrowserHistory,\n} from 'react-resource-router';\nimport { createResourcesPlugin } from 'react-resource-router/resources';\nimport { appRoutes } from './routing/routes';\n\nconst history = createBrowserHistory();\nconst resourcesPlugin = createResourcesPlugin({});\n\nconst App = () =\u003e (\n  \u003cRouter routes={appRoutes} history={history} plugins={[resourcesPlugin]}\u003e\n    \u003cRouteComponent /\u003e\n  \u003c/Router\u003e\n);\n```\n\n## Installation\n\n```bash\nnpm install react-resource-router\n\n# or\n\nyarn add react-resource-router\n```\n\n## Documentation\n\nCheck the [docs website](https://atlassian-labs.github.io/react-resource-router/) or the [docs folder](https://github.com/atlassian-labs/react-resource-router/tree/master/docs).\n\n## Examples\n\nYou can checkout the repo and play around with the examples we have setup to demonstrate how the API can be used for various use cases.\n\n1. Clone the repo and install dependencies\n2. Run `npm start`\n3. Local dev site will launch with all the examples\n\n\n\n## Thanks\n\nBig thanks to [Thinkmill](https://www.thinkmill.com.au/) for their involvement in this project.\n\n## License\n\nCopyright (c) 2020 Atlassian and others.\nApache 2.0 licensed, see [LICENSE](LICENSE) file.\n\n\u003cbr/\u003e\n\n[![With ❤️ from Atlassian](https://raw.githubusercontent.com/atlassian-internal/oss-assets/master/banner-cheers-light.png)](https://www.atlassian.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatlassian-labs%2Freact-resource-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatlassian-labs%2Freact-resource-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatlassian-labs%2Freact-resource-router/lists"}