javascript - React-router导致无法读取未定义的属性 'listen'

Question

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

Cannot read property 'listen' of undefined

如何解决？

Answer 1

browserHistory 是 createRouterHistory 生成的代码，如果 DOM 未定义，则返回 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")
)