react-router - 服务器端渲染匹配答案

【问题标题】：react-router - server side rendering matchreact-router - 服务器端渲染匹配
【发布时间】：2016-11-17 17:52:47
【问题描述】：

我的服务器上有这个

app.get('*', function(req, res) {
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    const body = renderToString(<RouterContext {...renderProps} />)
    res.send(`
      <!DOCTYPE html>
          <html>
            <head>
              <link href="//cdn.muicss.com/mui-0.6.5/css/mui.min.css" rel="stylesheet" type="text/css" />
            </head>
            <body>
              <div id="root">${body}</div>
              <script defer src="assets/app.js"></script>
            </body>
          </html>
          `)
  })
})

这在客户端

import { Router, hashHistory, browserHistory, match } from 'react-router'
let history = browserHistory

//client side, will become app.js
match({ routes, location, history }, (error, redirectLocation, renderProps) => {
  render(<Router {...renderProps} />, document.getElementById('root'))
})

问题它仅在我删除 (let history = browserHistory) 时才有效，但它会将 /#/ 哈希前缀添加到我的 url（我不想发生这种情况）。

当我将 let (history = browserHistory) 留在那里时，它会引发错误

警告：React 尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器渲染，并且在服务器上生成的标记不是客户端所期望的。 React 注入了新的标记来补偿哪些工作，但是您已经失去了服务器渲染的许多好处。相反，找出为什么在客户端或服务器上生成的标记不同： (客户)

错误消息很清楚，但是，我不明白为什么它可以与 hashHistory 一起使用，但在 browserHistory 上失败

【问题讨论】：

标签： match react-router universal server-side-rendering

【解决方案1】：

版本不兼容问题

解决方案

{
  "history": "^2.1.2",
  "react-router": "~2.5.2"
}

链接：

https://github.com/reactjs/react-router/issues/3003

【讨论】：