{"id":15789,"library":"react-router-redux","title":"React Router Redux Sync","description":"react-router-redux, specifically version 4.0.8, provided \"ruthlessly simple bindings\" to keep React Router (versions 2.x and 3.x) and Redux in sync. Its primary purpose was to store React Router's location state within the Redux store, enabling features like time-travel debugging with Redux DevTools. It offered middleware to dispatch navigation actions and a reducer to manage router state. The library itself was noted as 'beta software' in its README. While `react-router-redux` version 5.x was intended for React Router 4.x, the repository for this project has been archived since October 26, 2018, rendering it abandoned. Modern React applications typically use `@reduxjs/toolkit` and `react-router-dom` directly, often with `connected-react-router` (a spiritual successor) or `redux-first-history` for similar state synchronization needs, rather than this deprecated package.","status":"abandoned","version":"4.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/reactjs/react-router-redux","tags":["javascript","react","redux","router"],"install":[{"cmd":"npm install react-router-redux","lang":"bash","label":"npm"},{"cmd":"yarn add react-router-redux","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-router-redux","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core state management library that react-router-redux integrates with.","package":"redux","optional":false},{"reason":"Official React bindings for Redux, necessary for the <Provider> component.","package":"react-redux","optional":false},{"reason":"The routing library being synchronized. Specifically, react-router v2.x or v3.x for react-router-redux v4.x.","package":"react-router","optional":false},{"reason":"A dependency for creating history objects, explicitly listed in installation instructions.","package":"history","optional":false}],"imports":[{"note":"Used to connect your React Router setup to the Redux store.","wrong":"import ConnectedRouter from 'react-router-redux'","symbol":"ConnectedRouter","correct":"import { ConnectedRouter } from 'react-router-redux'"},{"note":"The reducer function that manages the router state within your Redux store.","wrong":"const routerReducer = require('react-router-redux').routerReducer","symbol":"routerReducer","correct":"import { routerReducer } from 'react-router-redux'"},{"note":"Middleware used to intercept and dispatch navigation actions to the history instance.","wrong":"import routerMiddleware from 'react-router-redux/middleware'","symbol":"routerMiddleware","correct":"import { routerMiddleware } from 'react-router-redux'"},{"note":"Action creator for programmatic navigation. While `react-router` also has navigation methods, `push` from `react-router-redux` integrates with Redux actions.","wrong":"import { browserHistory, push } from 'react-router'","symbol":"push","correct":"import { push } from 'react-router-redux'"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { createStore, combineReducers, applyMiddleware } from 'redux';\nimport { Provider } from 'react-redux';\nimport createHistory from 'history/createBrowserHistory';\nimport { Route } from 'react-router';\nimport { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux';\n\n// Placeholder for your application's reducers\nconst reducers = (state = {}, action) => state;\n\n// Placeholder components\nconst Home = () => <div>Home</div>;\nconst About = () => <div>About</div>;\nconst Topics = () => <div>Topics</div>;\n\n// Create a history of your choosing (e.g., browser history)\nconst history = createHistory();\n\n// Build the middleware for intercepting and dispatching navigation actions\nconst middleware = routerMiddleware(history);\n\n// Add the routerReducer to your store on the `router` key\n// Also apply our middleware for navigating\nconst store = createStore(\n  combineReducers({\n    ...reducers,\n    router: routerReducer\n  }),\n  applyMiddleware(middleware)\n);\n\n// Example of dispatching a navigation action (can be done from anywhere)\n// setTimeout(() => {\n//   store.dispatch(push('/about'));\n// }, 2000);\n\nReactDOM.render(\n  <Provider store={store}>\n    { /* ConnectedRouter will use the store from Provider automatically */ }\n    <ConnectedRouter history={history}>\n      <div>\n        <Route exact path=\"/\" component={Home}/>\n        <Route path=\"/about\" component={About}/>\n        <Route path=\"/topics\" component={Topics}/>\n      </div>\n    </ConnectedRouter>\n  </Provider>,\n  document.getElementById('root')\n);\n","lang":"javascript","description":"This quickstart demonstrates how to set up `react-router-redux` with `redux` and `react-router` (v4.x is assumed for `ConnectedRouter` from the README, despite the package version being 4.0.8, implying a common usage pattern at the time of the README update). It shows combining reducers, applying the router middleware, and using `ConnectedRouter` to synchronize browser history with the Redux store."},"warnings":[{"fix":"Review the 4.0.0 release notes and adjust your application to explicitly import and use `routerMiddleware` and `push` if you still require Redux-driven navigation. For simpler cases, directly using React Router's history objects is recommended.","message":"Version 4.0.0 introduced significant breaking changes. Action creators and middleware were separated from the history syncing function, and the use of action creators for navigation became largely obsoleted by React Router's new history singletons (React Router v2.0+). The library's scope was reduced to primarily focus on syncing history state to the Redux store for purposes like time travel.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"For new projects or existing applications on modern React Router versions (v5+), consider alternatives like `connected-react-router` (a community-maintained successor to `react-router-redux` for React Router v4/v5) or `redux-first-history` (supporting React Router v5/v6 and other routers). For applications not needing Redux time-travel for routing, `react-router-dom` and `react-redux` can be used independently.","message":"The `reactjs/react-router-redux` GitHub repository was archived on October 26, 2018, and is now read-only. This library is no longer actively maintained.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Ensure compatibility between your `react-router-redux` version and `react-router` version. If using `react-router` v4 or later, you should generally use `connected-react-router` or `redux-first-history`, not `react-router-redux` v4.x.","message":"This version (4.x) of `react-router-redux` is primarily intended for use with `react-router` versions 2.x and 3.x. The README, however, mentions 'react-router-redux 5.x for use with react-router 4.x' which can lead to confusion if you are using a newer React Router version with `react-router-redux` 4.x.","severity":"gotcha","affected_versions":"<5.0.0"},{"fix":"Proceed with caution. Given its abandoned status, expect no further fixes for bugs or security vulnerabilities. Thorough testing is recommended if using in legacy systems.","message":"The library explicitly states it's 'beta software' in its README, indicating potential instability, unaddressed bugs, or API changes, even at its final release.","severity":"gotcha","affected_versions":"All"},{"fix":"Always rely on the props passed by React Router to your components, as these are updated only after React Router has processed all asynchronous code and updated the component tree.","message":"Accessing router state directly from the Redux store is discouraged. React Router operates asynchronously, and the component tree may not be updated in sync with the Redux state.","severity":"gotcha","affected_versions":"All"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Upgrade to `react-router-redux` version 4.0.2 or later to resolve this issue.","cause":"An early bug in `routerReducer` in versions 4.0.0 and 4.0.1 where it was not robust to being called without arguments.","error":"Error: Calling routerReducer() with no args crashes."},{"fix":"Ensure you are using at least `react-router-redux` version 4.0.0-rc.2 or later, which included a fix for this bug.","cause":"An issue in early 4.0.0-beta/rc releases where an initial route redirect could lead to a blank page.","error":"Blank page on initial route redirect"},{"fix":"For `react-router-redux` v4.x, ensure you have `history` installed (e.g., `npm install --save history`). The usage example imports `createHistory from 'history/createBrowserHistory'`, which is for `history` v4.x. If using an older `history` version, `createBrowserHistory` might be a direct export from 'history'.","cause":"Incorrect import or version mismatch of the `history` package. `createBrowserHistory` was moved to a sub-path in newer `history` versions.","error":"TypeError: createHistory is not a function or history/createBrowserHistory not found"}],"ecosystem":"npm"}