Connected React Router

A Redux binding for React Router v4

Main features

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

🎁 Support React Router v4.

☀️ Support functional component hot reloading while preserving state (with react-hot-reload).

🎉 Dispatching history methods (push, replace, go, goBack, goForward) work for both redux-thunk and redux-saga.

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

🕘 Support time traveling in Redux DevTools.

💎 Support Immutable.js

💪 Support TypeScript

Installation

Using npm:

$ npm install --save connected-react-router

Or yarn:

$ yarn add connected-react-router

Usage

Step 1

• Create a history object.
• Wrap the root reducer with connectRouter and supply the history object to get a new root reducer.
• Use routerMiddleware(history) if you want to dispatch history actions (ex. to change URL with push('/path/to/somewhere')).

...
import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'
...
const history = createBrowserHistory()

const store = createStore(
  connectRouter(history)(rootReducer), // new root reducer with router state
  initialState,
  compose(
    applyMiddleware(
      routerMiddleware(history), // for dispatching history actions
      // ... other middlewares ...
    ),
  ),
)

Step 2

• Wrap your react-router v4 routing with ConnectedRouter and pass history object as a prop.
• Place ConnectedRouter as children 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'
...
ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
      <div> { /* your usual react-router v4 routing */ }
        <Switch>
          <Route exact path="/" render={() => (<div>Match</div>)} />
          <Route render={() => (<div>Miss</div>)} />
        </Switch>
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('react-root')
)

Now, it's ready to work!

Examples

See examples folder

FAQ

• How to navigate with Redux action
• How to get current browser location (URL)
• How to set Router props e.g. basename, initialEntries, etc.
• How to hot reload functional components
• How to hot reload reducers
• How to support Immutable.js

Build

npm run build

Generated files will be in lib folder.

Contributors

See Contributors and Acknowledge.

License

MIT License