connected-react-router

by supasate

A Redux binding for React Router v4

4.3K Stars 525 Forks Last release: 8 months ago (v6.8.0) MIT License 415 Commits 46 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

v6.0.0 requires React v16.4.0 and React Redux v6.0 / v7.0.

Connected React Router Build Status Open Source Helpers

A Redux binding for React Router v4 and v5

Main features

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

:gift: Supports React Router v4 and v5.

:sunny: Supports functional component hot reloading while preserving state (with react-hot-reload).

:tada: Dispatching of history methods (

push
,
replace
,
go
,
goBack
,
goForward
) works for both redux-thunk and redux-saga.

:snowman: Nested children can access routing state such as the current location directly with

react-redux
's
connect
.

:clock9: Supports time traveling in Redux DevTools.

:gem: Supports Immutable.js

:muscle: Supports TypeScript

Installation

Connected React Router requires React 16.4 and React Redux 6.0 or later.

$ npm install --save connected-react-router

Or

$ yarn add connected-react-router

Usage

Step 1

In your root reducer file, - Create a function that takes

history
as an argument and returns a root reducer. - Add
router
reducer into root reducer by passing
history
to
connectRouter
. - Note: The key MUST be
router
.
// reducers.js
import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'

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

Step 2

When creating a Redux store, - Create a

history
object. - Provide the created
history
to the root reducer creator. - Use
routerMiddleware(history)
if you want to dispatch history actions (e.g. to change URL with
push('/path/to/somewhere')
).
// configureStore.js
...
import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import createRootReducer from './reducers'
...
export const history = createBrowserHistory()

export default function configureStore(preloadedState) { const store = createStore( createRootReducer(history), // root reducer with router state preloadedState, compose( applyMiddleware( routerMiddleware(history), // for dispatching history actions // ... other middlewares ... ), ), )

return store }

Step 3

  • 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 problems synchronising the state.
  • Place
    ConnectedRouter
    as a child of
    react-redux
    's
    Provider
    .
  • N.B. If doing server-side rendering, you should still use the
    StaticRouter
    from
    react-router
    on the server.
// index.js
...
import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4/v5
import { ConnectedRouter } from 'connected-react-router'
import configureStore, { history } from './configureStore'
...
const store = configureStore(/* provide initial state if any */)

ReactDOM.render( { /* place ConnectedRouter under Provider / } <> { / your usual react-router v4/v5 routing */ } (

Match
)} /> (
Miss
)} /> > , document.getElementById('react-root') )

Note: the

history
object provided to
router
reducer,
routerMiddleware
, and
ConnectedRouter
component must be the same
history
object.

Now, it's ready to work!

Examples

See the examples folder

FAQ

Build

npm run build

Generated files will be in the

lib
folder.

Development

When 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.

In

index.js
.
js
...
import { Provider, ReactReduxContext } from 'react-redux'
...
      
        
      
...

In

App.js
,
js
...
const App = ({ history, context }) => {
  return (
    
      { routes }
    
  )
}
...

Contributors

See Contributors and Acknowledge.

License

MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.