A Redux binding for React Router v4
Clone or download


Breaking change in v5.0.0! Please read How to migrate from v4 to v5.

Connected React Router Build Status Open Source Helpers

A Redux binding for React Router v4

Main features

✨ Synchronize router state with redux store through uni-directional flow (i.e. history -> store -> router -> components).

🎁 Support React Router v4.

β˜€οΈ Support functional component hot reloading while preserving state (with react-hot-reload).

πŸŽ‰ Dispatching of history methods (push, replace, go, goBack, goForward) works for both redux-thunk and redux-saga.

⛄️ Nested children can access routing state such as the current location directly with react-redux's connect.

πŸ•˜ Support time traveling in Redux DevTools.

πŸ’Ž Support Immutable.js

πŸ’ͺ Support TypeScript


Using npm:

$ npm install --save connected-react-router

Or yarn:

$ yarn add connected-react-router


Step 1

  • Create a history object.
  • Create root reducer as a function that takes history as an argument and returns reducer.
  • Add router reducer into root reducer by passing history to connectRouter. Note: The key MUST be router.
  • Use routerMiddleware(history) if you want to dispatch history actions (e.g. to change URL with push('/path/to/somewhere')).
// reducers.js
import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'

export default (history) => combineReducers({
  router: connectRouter(history),
  ... // rest of your reducers

// configureStore.js
import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import createRootReducer from './reducers'
const history = createBrowserHistory()

const store = createStore(
  createRootReducer(history), // root reducer with router state
      routerMiddleware(history), // for dispatching history actions
      // ... other middlewares ...

Step 2

  • Wrap your react-router v4 routing with ConnectedRouter and pass the history object as a prop.
  • Place ConnectedRouter as a child of react-redux's Provider.
import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4
import { ConnectedRouter } from 'connected-react-router'
  <Provider store={store}>
    <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
      <div> { /* your usual react-router v4 routing */ }
          <Route exact path="/" render={() => (<div>Match</div>)} />
          <Route render={() => (<div>Miss</div>)} />

Now, it's ready to work!


See the examples folder



npm run build

Generated files will be in the lib folder.


See Contributors and Acknowledge.


MIT License