Question

我的服务器上有这个

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）时有效，但它会将/＃/ hash前缀添加到我的url（我不想发生这种情况）。

当我离开let（history = browserHistory）时，它会抛出错误

警告：React尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器呈现，并且在服务器上生成的标记不是客户端所期望的。 React注入了新的标记以补偿哪些有效但你已经失去了服务器渲染的许多好处。相反，弄清楚为什么生成的标记在客户端或服务器上是不同的：（客户）＆lt; ！ - react-empty：1 - （服务器）＆lt; section data-reactro

错误信息非常清楚，但是，我不明白为什么它与hashHistory一起使用但是在browserHistory中失败

Answer 1

版本不兼容问题

<强>溶液

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

链接：

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

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

1 个答案: