{"id":13468465,"url":"https://github.com/supasate/connected-react-router","last_synced_at":"2025-05-12T15:17:25.373Z","repository":{"id":38938343,"uuid":"76251826","full_name":"supasate/connected-react-router","owner":"supasate","description":"A Redux binding for React Router v4","archived":false,"fork":false,"pushed_at":"2023-03-02T00:55:02.000Z","size":3617,"stargazers_count":4715,"open_issues_count":175,"forks_count":592,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-04-18T02:20:47.757Z","etag":null,"topics":["react","react-router","redux"],"latest_commit_sha":null,"homepage":"","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/supasate.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-12-12T11:49:25.000Z","updated_at":"2025-04-14T17:48:46.000Z","dependencies_parsed_at":"2023-02-06T14:31:48.584Z","dependency_job_id":"4c80e053-5c91-4a31-aaa3-6c72c7adee68","html_url":"https://github.com/supasate/connected-react-router","commit_stats":{"total_commits":402,"total_committers":81,"mean_commits":4.962962962962963,"dds":0.6318407960199005,"last_synced_commit":"5d4c197043deb89238f9b380a6a1ef4d909f14a7"},"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supasate%2Fconnected-react-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supasate%2Fconnected-react-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supasate%2Fconnected-react-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supasate%2Fconnected-react-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/supasate","download_url":"https://codeload.github.com/supasate/connected-react-router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250434503,"owners_count":21430118,"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","redux"],"created_at":"2024-07-31T15:01:11.478Z","updated_at":"2025-04-23T17:10:57.247Z","avatar_url":"https://github.com/supasate.png","language":"JavaScript","readme":"\u003e Breaking change in v5.0.0! Please read [How to migrate from v4 to v5/v6](https://github.com/supasate/connected-react-router/blob/master/FAQ.md#how-to-migrate-from-v4-to-v5v6).\n\n\u003e v6.0.0 requires React v16.4.0 and React Redux v6.0 / v7.0.\n\nConnected React Router [![Build Status](https://travis-ci.org/supasate/connected-react-router.svg?branch=master)](https://travis-ci.org/supasate/connected-react-router) [![Open Source Helpers](https://www.codetriage.com/supasate/connected-react-router/badges/users.svg)](https://www.codetriage.com/supasate/connected-react-router)\n======================\nA Redux binding for React Router v4 and v5\n\nMain features\n-------------\n:sparkles: Synchronize router state with redux store through uni-directional flow (i.e. history -\u003e store -\u003e router -\u003e components).\n\n:gift: Supports [React Router v4 and v5](https://github.com/ReactTraining/react-router).\n\n:sunny: Supports functional component hot reloading while preserving state (with [react-hot-reload](https://github.com/gaearon/react-hot-loader)).\n\n:tada: Dispatching of history methods (`push`, `replace`, `go`, `goBack`, `goForward`) works for both [redux-thunk](https://github.com/gaearon/redux-thunk) and [redux-saga](https://github.com/yelouafi/redux-saga).\n\n:snowman: Nested children can access routing state such as the current location directly with `react-redux`'s `connect`.\n\n:clock9: Supports time traveling in Redux DevTools.\n\n:gem: Supports [Immutable.js](https://facebook.github.io/immutable-js/)\n\n:muscle: Supports TypeScript\n\n\nInstallation\n-----------\nConnected React Router requires **React 16.4 and React Redux 6.0 or later**.\n\n\n    npm install --save connected-react-router\n\nOr\n\n    yarn add connected-react-router\n\nUsage\n-----\n### Step 1\nIn your root reducer file, \n- Create a function that takes `history` as an argument and returns a root reducer.\n- Add `router` reducer into root reducer by passing `history` to `connectRouter`. \n- **Note: The key MUST be `router`**.\n \n```js\n// reducers.js\nimport { combineReducers } from 'redux'\nimport { connectRouter } from 'connected-react-router'\n\nconst createRootReducer = (history) =\u003e combineReducers({\n  router: connectRouter(history),\n  ... // rest of your reducers\n})\nexport default createRootReducer\n```\n\n### Step 2\nWhen creating a Redux store,\n- Create a `history` object.\n- Provide the created `history` to the root reducer creator.\n- Use `routerMiddleware(history)` if you want to dispatch history actions (e.g. to change URL with `push('/path/to/somewhere')`).\n\n\n```js\n// configureStore.js\n...\nimport { createBrowserHistory } from 'history'\nimport { applyMiddleware, compose, createStore } from 'redux'\nimport { routerMiddleware } from 'connected-react-router'\nimport createRootReducer from './reducers'\n...\nexport const history = createBrowserHistory()\n\nexport default function configureStore(preloadedState) {\n  const store = createStore(\n    createRootReducer(history), // root reducer with router state\n    preloadedState,\n    compose(\n      applyMiddleware(\n        routerMiddleware(history), // for dispatching history actions\n        // ... other middlewares ...\n      ),\n    ),\n  )\n\n  return store\n}\n```\n\n### Step 3\n\n- Wrap your react-router v4/v5 routing with `ConnectedRouter` and pass the `history` object as a prop.  Remember to delete any usage of `BrowserRouter` or `NativeRouter` as leaving this in will [cause](https://github.com/supasate/connected-react-router/issues/230#issuecomment-461628073) [problems](https://github.com/supasate/connected-react-router/issues/230#issuecomment-476164384) synchronising the state.\n- Place `ConnectedRouter` as a child of `react-redux`'s `Provider`.\n- **N.B.** If doing server-side rendering, you should still use the `StaticRouter` from `react-router` on the server.\n\n```js\n// index.js\n...\nimport { Provider } from 'react-redux'\nimport { Route, Switch } from 'react-router' // react-router v4/v5\nimport { ConnectedRouter } from 'connected-react-router'\nimport configureStore, { history } from './configureStore'\n...\nconst store = configureStore(/* provide initial state if any */)\n\nReactDOM.render(\n  \u003cProvider store={store}\u003e\n    \u003cConnectedRouter history={history}\u003e { /* place ConnectedRouter under Provider */ }\n      \u003c\u003e { /* your usual react-router v4/v5 routing */ }\n        \u003cSwitch\u003e\n          \u003cRoute exact path=\"/\" render={() =\u003e (\u003cdiv\u003eMatch\u003c/div\u003e)} /\u003e\n          \u003cRoute render={() =\u003e (\u003cdiv\u003eMiss\u003c/div\u003e)} /\u003e\n        \u003c/Switch\u003e\n      \u003c/\u003e\n    \u003c/ConnectedRouter\u003e\n  \u003c/Provider\u003e,\n  document.getElementById('react-root')\n)\n```\nNote: the `history` object provided to `router` reducer, `routerMiddleware`, and `ConnectedRouter` component must be the same `history` object.\n\nNow, it's ready to work!\n\n\nExamples\n--------\nSee the [examples](https://github.com/supasate/connected-react-router/tree/master/examples) folder\n\n[FAQ](https://github.com/supasate/connected-react-router/tree/master/FAQ.md)\n-----\n- [How to navigate with Redux action](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-navigate-with-redux-action)\n- [How to get the current browser location (URL)](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-get-the-current-browser-location-url)\n- [How to set Router props e.g. basename, initialEntries, etc.](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-set-router-props-eg-basename-initialentries-etc)\n- [How to hot reload functional components](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-hot-reload-functional-components)\n- [How to hot reload reducers](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-hot-reload-reducers)\n- [How to support Immutable.js](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-support-immutablejs)\n- [How to implement server-side rendering](https://medium.com/@cereallarceny/server-side-rendering-in-create-react-app-with-all-the-goodies-without-ejecting-4c889d7db25e) ([sample codebase](https://github.com/cereallarceny/cra-ssr))\n- [How to migrate from v4 to v5](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-migrate-from-v4-to-v5)\n- [How to use connected-react-router with react native](./FAQ.md#how-to-use-connected-react-router-with-react-native)\n- [How to use your own context with react-redux](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-use-your-own-context-with-react-redux)\n\nBuild\n-----\n```bash\nnpm run build\n```\nGenerated files will be in the `lib` folder.\n\nDevelopment\n-----------\nWhen testing the example apps with `npm link` or `yarn link`, you should explicitly provide the same `Context` to both `Provider` and `ConnectedRouter` to make sure that the `ConnectedRouter` doesn't pick up a different `ReactReduxContext` from a different `node_modules` folder.\n\nIn `index.js`.\n```js\n...\nimport { Provider, ReactReduxContext } from 'react-redux'\n...\n      \u003cProvider store={store} context={ReactReduxContext}\u003e\n        \u003cApp history={history} context={ReactReduxContext} /\u003e\n      \u003c/Provider\u003e\n...\n```\n\nIn `App.js`,\n```js\n...\nconst App = ({ history, context }) =\u003e {\n  return (\n    \u003cConnectedRouter history={history} context={context}\u003e\n      { routes }\n    \u003c/ConnectedRouter\u003e\n  )\n}\n...\n```\n\nContributors\n------------\nSee [Contributors](https://github.com/supasate/connected-react-router/graphs/contributors) and [Acknowledge](https://github.com/supasate/connected-react-router/blob/master/ACKNOWLEDGE.md).\n\nLicense\n-------\n[MIT License](https://github.com/supasate/connected-react-router/blob/master/LICENSE.md)\n","funding_links":[],"categories":["JavaScript","Uncategorized","Redux [🔝](#readme)"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsupasate%2Fconnected-react-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsupasate%2Fconnected-react-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsupasate%2Fconnected-react-router/lists"}