{"id":13822018,"url":"https://github.com/zackify/react-router-async-routing","last_synced_at":"2025-10-27T20:31:00.581Z","repository":{"id":72855679,"uuid":"83603134","full_name":"zackify/react-router-async-routing","owner":"zackify","description":"react router v4 async routing","archived":false,"fork":false,"pushed_at":"2017-11-07T15:38:50.000Z","size":165,"stargazers_count":127,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-01T08:01:43.581Z","etag":null,"topics":["async","react-router","reactjs","webpack2"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/zackify.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-03-01T21:23:35.000Z","updated_at":"2023-10-17T18:57:44.000Z","dependencies_parsed_at":"2023-02-26T20:45:25.638Z","dependency_job_id":null,"html_url":"https://github.com/zackify/react-router-async-routing","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Freact-router-async-routing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Freact-router-async-routing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Freact-router-async-routing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Freact-router-async-routing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zackify","download_url":"https://codeload.github.com/zackify/react-router-async-routing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238552992,"owners_count":19491353,"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":["async","react-router","reactjs","webpack2"],"created_at":"2024-08-04T08:01:38.323Z","updated_at":"2025-10-27T20:31:00.197Z","avatar_url":"https://github.com/zackify.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n## Async Routing\n\nTODO:\n- server render\n- make route config optional\n\nReact router v4 is awesome, but one thing is missing! Async routes. There's a couple components out there but they all have the same problem, on route change, the component will return null, then load the page. This makes for an annoying user experience. This package will wait for the bundle before a route change, and also allow you to preload pages!\n\nYou must be using webpack 2 along with [syntax-dynamic-import](https://webpack.js.org/guides/code-splitting-import/#usage-with-babel) to use this package!\n\n## Install\n\n```\nnpm install react-router-async-routing\n```\n\n## Setup\n\nCreate a routes file, with the pathname and path to your component files\n\n```js\nexport default [\n  {\n    path: '/employers',\n    dataPath: 'employers',\n  },\n  {\n    path: '/test/:name',\n    dataPath: 'test/index',\n  },\n]\n```\n\nCreate a `router` file that will export `Preload`, `Link`, and `Route` components for you to use in place of the built in components in v4:\n\n```js\nimport routes from './routes';\nimport AsyncSetup from 'react-router-async-routing'\n\nconst { Route, Link, Preload } = AsyncSetup(routes, path =\u003e import(`./views/${path}.js`));\n\nexport { Link, Route, Preload };\n\n```\n\nThe first argument is your routes array, the second is a function that takes a path (the dataPath in the routes file) and load the component according to its location.\n\nNow, render your routes using the components from the file you just created!\n\n```js\nimport { Route } from './router'\n\n....\n{routes.map(route =\u003e \u003cRoute key={route.path} {...route} /\u003e)}\n\n```\n\nNow, you can link to any page like you're used to, just `import { Link } from './router'`!\n\n## Preloading routes\n\nNote: If you use a service worker, this isn't really needed. Except on older browsers.\n\nIf a user is on the homepage, and you'd like to load the about page ahead of time, just render this inside of your homepage:\n\n```js\nexport const Home = (\n  \u003cdiv\u003e\n    \u003ch2\u003eHome\u003c/h2\u003e\n    \u003cPreload path=\"/about\" /\u003e\n  \u003c/div\u003e  \n)\n```\n\nThe route will be loaded in the background :)\n\n\n## Custom loading\n\nIf you need to do more than just async load a route, you can make your own loader by importing components directly:\n\n```js\nimport LinkBuilder from 'react-router-async-routing/link'\n\nconst CustomLink = LinkBuilder(\n  async ({ path }) =\u003e await somePromise()\n)\n\n```\n\nThe function passed will be `await`ed on any time a link is clicked.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackify%2Freact-router-async-routing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzackify%2Freact-router-async-routing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackify%2Freact-router-async-routing/lists"}