README
Connected React Router
A Redux binding for React Router v4
Main features
:sparkles: Synchronize router state with redux store with uni-directional flow (history -> store -> router -> components).
:gift: Support React Router v4.
:sunny: Support functional component hot reloading while preserving state (with react-hot-reload v3).
:tada: Dispatching history methods (push
, replace
, go
, goBack
, goForward
) work for both redux-thunk and redux-saga.
:snowman: Nested children can access routing state such as current location directly with react-redux
's connect
.
:clock9: Support time traveling in Redux DevTools.
:gem: Support Immutable.js
:muscle: 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 thehistory
object to get a new root reducer. - Use
routerMiddleware(history)
if you want to dispatch history actions (ex. to change URL withpush('/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 passhistory
object as a prop. - Place
ConnectedRouter
as children ofreact-redux
'sProvider
.
...
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.