React-router 导致 Cannot read 属性 'listen' of undefined

Question

在服务器端使用 react-router 渲染 webpack 构建时，我遇到了奇怪的 js 异常：

Cannot read property 'listen' of undefined

我该如何解决？

Answer 1

browserHistory 是由 createRouterHistory 生成的代码，如果未定义 DOM，则 returns undefined。这就是您出现此错误的原因。

解决方案是导入 useRouterHistory 并以某种方式将其替换为 createMemoryHistory ，其目的是用于服务器端渲染。 webpack 的实现：

# application.js
import { Router, useRouterHistory } from "react-router"
import { createHistory } from "history"

const browserHistory = useRouterHistory(createHistory)({ queryKey: false })

<Router history={history}>
  ...bla-bla
</Router>

# webpack.config.server.js - sends this code to react server
new webpack.NormalModuleReplacementPlugin(
  /createBrowserHistory/,
  require.resolve("./node_modules/react-router/lib/createMemoryHistory.js")
)

React-router 导致 Cannot read 属性 'listen' of undefined

React-router causes Cannot read property 'listen' of undefined

javascript

reactjs

react-router

isomorphic-javascript