React Router Redux Sync

Common errors

• Error: Calling routerReducer() with no args crashes.

  cause An early bug in `routerReducer` in versions 4.0.0 and 4.0.1 where it was not robust to being called without arguments.
  fix Upgrade to `react-router-redux` version 4.0.2 or later to resolve this issue.

• Blank page on initial route redirect

  cause An issue in early 4.0.0-beta/rc releases where an initial route redirect could lead to a blank page.
  fix Ensure you are using at least `react-router-redux` version 4.0.0-rc.2 or later, which included a fix for this bug.

• TypeError: createHistory is not a function or history/createBrowserHistory not found

  cause Incorrect import or version mismatch of the `history` package. `createBrowserHistory` was moved to a sub-path in newer `history` versions.
  fix For `react-router-redux` v4.x, ensure you have `history` installed (e.g., `npm install --save history`). The usage example imports `createHistory from 'history/createBrowserHistory'`, which is for `history` v4.x. If using an older `history` version, `createBrowserHistory` might be a direct export from 'history'.

Warnings

• breaking Version 4.0.0 introduced significant breaking changes. Action creators and middleware were separated from the history syncing function, and the use of action creators for navigation became largely obsoleted by React Router's new history singletons (React Router v2.0+). The library's scope was reduced to primarily focus on syncing history state to the Redux store for purposes like time travel.
  Fix: Review the 4.0.0 release notes and adjust your application to explicitly import and use `routerMiddleware` and `push` if you still require Redux-driven navigation. For simpler cases, directly using React Router's history objects is recommended.
• deprecated The `reactjs/react-router-redux` GitHub repository was archived on October 26, 2018, and is now read-only. This library is no longer actively maintained.
  Fix: For new projects or existing applications on modern React Router versions (v5+), consider alternatives like `connected-react-router` (a community-maintained successor to `react-router-redux` for React Router v4/v5) or `redux-first-history` (supporting React Router v5/v6 and other routers). For applications not needing Redux time-travel for routing, `react-router-dom` and `react-redux` can be used independently.
• gotcha This version (4.x) of `react-router-redux` is primarily intended for use with `react-router` versions 2.x and 3.x. The README, however, mentions 'react-router-redux 5.x for use with react-router 4.x' which can lead to confusion if you are using a newer React Router version with `react-router-redux` 4.x.
  Fix: Ensure compatibility between your `react-router-redux` version and `react-router` version. If using `react-router` v4 or later, you should generally use `connected-react-router` or `redux-first-history`, not `react-router-redux` v4.x.
• gotcha The library explicitly states it's 'beta software' in its README, indicating potential instability, unaddressed bugs, or API changes, even at its final release.
  Fix: Proceed with caution. Given its abandoned status, expect no further fixes for bugs or security vulnerabilities. Thorough testing is recommended if using in legacy systems.
• gotcha Accessing router state directly from the Redux store is discouraged. React Router operates asynchronously, and the component tree may not be updated in sync with the Redux state.
  Fix: Always rely on the props passed by React Router to your components, as these are updated only after React Router has processed all asynchronous code and updated the component tree.

Install

• npm install react-router-redux npm
• yarn add react-router-redux yarn
• pnpm add react-router-redux pnpm

Imports

• ConnectedRouter
  wrong:

  import ConnectedRouter from 'react-router-redux'

  correct:

  import { ConnectedRouter } from 'react-router-redux'

  Used to connect your React Router setup to the Redux store.
• routerReducer
  wrong:

  const routerReducer = require('react-router-redux').routerReducer

  correct:

  import { routerReducer } from 'react-router-redux'

  The reducer function that manages the router state within your Redux store.
• routerMiddleware
  wrong:

  import routerMiddleware from 'react-router-redux/middleware'

  correct:

  import { routerMiddleware } from 'react-router-redux'

  Middleware used to intercept and dispatch navigation actions to the history instance.
• push
  wrong:

  import { browserHistory, push } from 'react-router'

  correct:

  import { push } from 'react-router-redux'

  Action creator for programmatic navigation. While `react-router` also has navigation methods, `push` from `react-router-redux` integrates with Redux actions.

Quickstart

This quickstart demonstrates how to set up `react-router-redux` with `redux` and `react-router` (v4.x is assumed for `ConnectedRouter` from the README, despite the package version being 4.0.8, implying a common usage pattern at the time of the README update). It shows combining reducers, applying the router middleware, and using `ConnectedRouter` to synchronize browser history with the Redux store.

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import createHistory from 'history/createBrowserHistory';
import { Route } from 'react-router';
import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux';

// Placeholder for your application's reducers
const reducers = (state = {}, action) => state;

// Placeholder components
const Home = () => <div>Home</div>;
const About = () => <div>About</div>;
const Topics = () => <div>Topics</div>;

// Create a history of your choosing (e.g., browser history)
const history = createHistory();

// Build the middleware for intercepting and dispatching navigation actions
const middleware = routerMiddleware(history);

// Add the routerReducer to your store on the `router` key
// Also apply our middleware for navigating
const store = createStore(
  combineReducers({
    ...reducers,
    router: routerReducer
  }),
  applyMiddleware(middleware)
);

// Example of dispatching a navigation action (can be done from anywhere)
// setTimeout(() => {
//   store.dispatch(push('/about'));
// }, 2000);

ReactDOM.render(
  <Provider store={store}>
    { /* ConnectedRouter will use the store from Provider automatically */ }
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
        <Route path="/topics" component={Topics}/>
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);