javascript - 同构 react-router-redux syncHistory 中间件

Question

react-router-redux 中的

syncHistory 接受一个参数，即 react-router 中的 browserHistory。在服务器上，调用 syncHistory(browserHistory) 并没有真正起作用。我正在尝试使用中间件创建商店:

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)

在服务器上，我收到以下错误:

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

TypeError: Cannot read property 'listen' of undefined

Answer 1

如您所见，browserHistory 将无法在服务器上运行，因为它使用内置于浏览器中的 History API。在服务器上，您必须将其替换为 history/lib/createMemoryHistory 之类的内容，例如

import createHistory from 'history/lib/createMemoryHistory';

const reduxRouterMiddleware = syncHistory(createHistory);
...

查看 React 路由器 documentation有关历史的更多信息。

---

从 React Router 2 开始， docs , createMemoryHistory 作为 React Router 的一部分包含在内。

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