{"id":24134117,"url":"https://github.com/alexhtech/react-router-resovler","last_synced_at":"2026-05-12T18:33:55.965Z","repository":{"id":57343868,"uuid":"111399292","full_name":"alexhtech/react-router-resovler","owner":"alexhtech","description":"The powerful and small sized library what can help to make isomorphic application","archived":false,"fork":false,"pushed_at":"2018-06-13T08:20:38.000Z","size":60,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-27T05:04:16.764Z","etag":null,"topics":["isomorphic","preload","react-router","react-router-config","react-router-v4","server-side-rendering","ssr","universal"],"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/alexhtech.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}},"created_at":"2017-11-20T11:04:18.000Z","updated_at":"2018-06-13T08:20:40.000Z","dependencies_parsed_at":"2022-09-12T06:30:38.186Z","dependency_job_id":null,"html_url":"https://github.com/alexhtech/react-router-resovler","commit_stats":null,"previous_names":["alexolefirenko/react-router-resovler"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexhtech%2Freact-router-resovler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexhtech%2Freact-router-resovler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexhtech%2Freact-router-resovler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexhtech%2Freact-router-resovler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexhtech","download_url":"https://codeload.github.com/alexhtech/react-router-resovler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241350387,"owners_count":19948486,"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":["isomorphic","preload","react-router","react-router-config","react-router-v4","server-side-rendering","ssr","universal"],"created_at":"2025-01-12T00:19:47.700Z","updated_at":"2025-11-24T01:06:42.880Z","avatar_url":"https://github.com/alexhtech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-router-resolver\n\n[![npm version](https://img.shields.io/npm/v/react-router-resolver.svg?style=flat-square)](https://www.npmjs.org/package/react-router-resolver)\n[![npm downloads](https://img.shields.io/npm/dm/react-router-resolver.svg?style=flat-square)](http://npm-stat.com/charts.html?package=react-router-resolver)\n\nWere you thinking about how to load data before transition or how to load it on server-side with using react-router v4? \nOr maybe you thought how to load chunks before transition by click the link? What about security system on your project ? \nAlright, you can talk that there are too many library what implements it... \nBut I can suggest the powerful and small sized library what can help to do it on client-side and for server-side too\n\nAlright, let's start\n\n# Contents\n\n* [Simple example](#simple-example)\n* [Example usage with redux](#example-usage-with-redux)\n* [API](#api)\n* [Helpers](#helpers)\n\n\n**Internal dependencies:**\n\n| package  | ver |\n| ------------- | ------------- |\n| is-browser  | ^2.0.1  |\n| qs  | 6.5.1  |\n| react-display-name | ^0.2.3 |\n| shallowequal | ^1.0.2 |\n\n**External dependencies:**\n\n\n| package  | ver |\n| ------------- | ------------- |\n| react-router  | ^4.2.0  |\n| react-router-config  | 1.0.0-beta.4  |\n\n\n## Simple example\n\n**if you didn't work with the `react-router-config` please follow the [link](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config#route-configuration-shape) and review**\n\n`./src/routes/index.js`\n```js\nimport React from 'react'\nimport {NavLink} from 'react-router-dom'\nimport {renderRoutes} from 'react-router-config'\n\n\nconst App = ({route}) =\u003e (\n    \u003cdiv\u003e\n        \u003cul\u003e\n            \u003cli\u003e\n                \u003cNavLink to='/'\u003eto home\u003c/Link\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n                \u003cNavLink to='/test'\u003eto test page\u003c/Link\u003e\n            \u003c/li\u003e\n        \u003c/ul\u003e\n        {renderRoutes(route.routes)}\n    \u003c/div\u003e\n)\n\nconst Test = () =\u003e 'I am test page'\n\nexport default [\n    {\n        path: '/',\n        component: App,\n        routes: [\n            {\n                path: '/test',\n                component: Test\n            }\n        ]\n    }\n]\n```\n\nOk, this is just example. let's try to add react-router-resolver to do with\n\nWe need to load data before transition to `/test`. Ok\n\n```js\nexport default [\n    {\n        path: '/',\n        component: App,\n        routes: [\n            {\n                path: '/test',\n                component: Test,\n                preload: async (helpers) =\u003e { // preload will wait and hold the transition until the promise is resolved or rejected\n                    // here is we can to load data and put it to your storage like redux/mobx/mobx-state-tree and others...\n                    helpers.dispatch({\n                        type: 'PUT_DATA',\n                        payload: await someActionWhichReturnsPromise()\n                    })\n                }\n            }\n        ]\n    }\n]\n```\n\n## Example usage with redux\n\n`./src/resolver.js`\n\n```js\nimport Resolver from 'react-router-resolver'\n\n\nlet resolver\n\nconst getResolver = ({store, history, routes}) =\u003e {\n    if (resolver) return resolver\n    resolver = new Resolver({\n        routes,\n        store,\n        history,\n        actions: {\n            onStart: location =\u003e store.dispatch({\n                type: 'PRELOAD_START',\n                payload: location\n            }),\n            onSuccess: location =\u003e store.dispatch({\n                type: 'PRELOAD_SUCCESS',\n                payload: location\n            }),\n            onFail: (e, location) =\u003e store.dispatch({\n                type: 'PRELOAD_FAIL',\n                payload: {\n                    e,\n                    location\n                }\n            })\n        },\n        helpers: {\n            store,\n            history,\n            dispatch: store.dispatch,\n            getState: store.getState\n            // here is you can put your own helpers ...\n        },\n        resolved: []\n    })\n\n    return resolver\n}\n\n\nexport {\n    getResolver\n}\n```\n\n`./src/App.jsx`\n\n```js\nimport React from 'react'\nimport {ConnectedRouter} from 'react-router-redux'\nimport {renderRoutes} from 'react-router-config'\nimport {Provider} from 'react-redux'\nimport {getResolver} from './resolver'\nimport routes from './routes'\n\n\nconst App = async ({history, store}) =\u003e {\n    const resolver = getResolver({store, history, routes})\n\n    try {\n        await resolver.init(history.location)\n    } catch (e) {\n        console.error('something went wrong', e)\n    }\n\n    return (\n        \u003cProvider store={store}\u003e\n            \u003cConnectedRouter history={history}\u003e\n                {renderRoutes(routes)}\n            \u003c/ConnectedRouter\u003e\n        \u003c/Provider\u003e\n    )\n}\n\n\nexport {\n    App as default\n}\n```\n\n`./src/index.js`\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport {AppContainer} from 'react-hot-loader'\nimport createHistory from 'history/createBrowserHistory'\nimport configureStore from './store/configureStore'\nimport App from './App'\n\n\nconst history = createHistory()\nconst store = configureStore()\n\n\nconst render = App =\u003e {\n    App({history, store}).then(html =\u003e {\n        ReactDOM.render(\n            \u003cAppContainer warnings={false}\u003e\n                {html}\n            \u003c/AppContainer\u003e,\n            document.getElementById('react-root')\n        )\n    })\n}\n\nrender(App)\n\nif (module.hot) module.hot.accept('./App', () =\u003e render(App))\n```\n\nAnd test it :)\n\n## API\n\n| method\t\t\t\t|\tdesctiption\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n| ------------- | ------------------------------------------------------------- |\n| getRoutes \t\t| returns array of passed routes to the resolver\t  \t\t\t\t\t\t|\n| getResolved\t\t| returns an array of all resolved routes \t\t    \t\t\t\t\t\t\t|\n| setHelpers \t\t| (helpers) setting helpers for preload/onEnter hooks \t \t\t\t\t|\n| addHelper \t\t| (key, value) add helper\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  |\n| resolve \t\t\t|\t(location) resolve routes for server-side\t\t\t\t\t\t\t\t\t\t\t|\n| init \t\t\t\t\t|\t(location) resolve routes for client-side\t\t\t\t\t\t\t\t\t\t\t|\n\n\n## Helpers\n\n```js\nimport {onEnter, preload} from 'react-router-resolver'\n\n\nconst preloadOptions = { // this is default options\n    alwaysReload: false,\n    reloadOnParamsChange: true,\n    reloadOnQueryChange: true\n}\n\n// also you can use decorators style\n@onEnter(({check}) =\u003e check({\n    authenticated: true,\n    anonymous: false\n}))\n@preload(async ({helpers}) =\u003e {\n    const data = await getSomeData()\n    helpers.dispatch({\n        type: 'PUT_DATA',\n        payload: data\n    })\n}, preloadOptions)\n@connect(state =\u003e state.data)\nexport default class Test extends React.Component {\n    render() {\n        const {data} = this.props\n        return (\n            // use data in your component\n        )\n    }\n}\n```\n\n\n**onEnter like preload but onEnter fires always when location is change**\n\nor like object\n\n```js\n{\n    path: '/test',\n    component: Test,\n    preload: async ({helpers}) =\u003e {\n        const data = await getSomeData()\n        helpers.dispatch({\n            type: 'PUT_DATA',\n            payload: data\n        })\n    },\n    preloadOptions: { // this is default options\n        alwaysReload: false,\n        reloadOnParamsChange: true,\n        reloadOnQueryChange: true\n    },\n    onEnter: ({check}) =\u003e check({\n        authenticated: true,\n        anonymous: false\n    })\n}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexhtech%2Freact-router-resovler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexhtech%2Freact-router-resovler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexhtech%2Freact-router-resovler/lists"}