Isomorphic react-router-redux syncHistory中间件

Question

syncHistory from react-router-redux takes in an argument that is browserHistory from react-router . On the server, calling syncHistory(browserHistory) does not really work. I am trying to create a store with middleware:

const { syncHistory } from 'react-router-redux'
const { browserHistory } from 'react-router'
const { createStore, applyMiddleware } from 'redux'

const reduxRouterMiddleware = syncHistory(browserHistory)
const createStoreWithMiddleware = applyMiddleware(
  routerReduxMiddleware
)(createStore)

On the server, I get the following error:

    unsubscribeHistory = history.listen(function (location) {
                                ^

TypeError: Cannot read property 'listen' of undefined

Answer 1

As you have observed browserHistory will not work on the server as it uses the History API that is built into the browser. On the server you have to substitute it for something like history/lib/createMemoryHistory , eg

import createHistory from 'history/lib/createMemoryHistory';

const reduxRouterMiddleware = syncHistory(createHistory);
...

See the React Router documentation for more information on history.

---

As of React Router 2, docs , createMemoryHistory is included as a part of the React Router.

import createHistory from 'react-router/lib/createMemoryHistory';