connected-react-router

To connect your routing to Redux:

1. Wrap your React Router v4/v5 routing with the ConnectedRouter component.
2. Pass the same history object used in your reducer and middleware to the history prop of ConnectedRouter.
3. Ensure ConnectedRouter is a child of the react-redux Provider.
4. Warning: Remove any usage of BrowserRouter or NativeRouter, as they will conflict with the state synchronization.

// 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(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route exact path="/" render={() => (<div>Match</div>)} />
        <Route render={() => (<div>Miss</div>)} />
      </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('react-root')
)

Migration involves three main changes:

1. Reducers: Change your root reducer from a static object to a function that accepts history. Use connectRouter(history) for the router key.
2. Store Configuration: In createStore, call your new root reducer function with history instead of wrapping the old reducer with connectRouter.
3. Hot Reloading: Update store.replaceReducer to use the new function-based root reducer creation.

// reducers.js
- export default combineReducers({
+ export default (history) => combineReducers({
+   router: connectRouter(history),
    ...
  })

// configureStore.js
- import { connectRouter, routerMiddleware } from 'connected-react-router'
- import rootReducer from './reducers'
+ import { routerMiddleware } from 'connected-react-router'
+ import createRootReducer from './reducers'

- const store = createStore(
-   connectRouter(history)(rootReducer),
+ const store = createStore(
+   createRootReducer(history),
    initialState,
    ...
  )

When setting up your Redux store:

1. Create a history object (e.g., using createBrowserHistory from the history package).
2. Pass this history object to your root reducer creator.
3. Use routerMiddleware(history) in your middleware configuration to enable dispatching history actions (like push('/path')) from Redux actions.

// 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
}

You can trigger navigation from various parts of your application using the push action creator from connected-react-router.

• Directly with store.dispatch: Use store.dispatch(push('/path')).
• With react-redux: Connect the push action to your component using connect and call it from event handlers.
• In Redux Thunk: Dispatch the push action within a thunk function.
• In Redux Saga: Use the put effect to dispatch the push action.

// with store.dispatch
import { push } from 'connected-react-router'
store.dispatch(push('/path/to/somewhere'))

// with react-redux
import { push } from 'connected-react-router'
export default connect(null, { push })(Component);

// in redux thunk
import { push } from 'connected-react-router'
export const login = (username, password) => (dispatch) => {
  dispatch(push('/home'))
}

// in redux saga
import { push } from 'connected-react-router'
import { put } from 'redux-saga/effects'
export function* login(username, password) {
  yield put(push('/home'))
}