1

我的服务器上有这个

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 注入了新的标记来补偿哪些工作，但是您已经失去了服务器渲染的许多好处。相反，请弄清楚为什么在客户端或服务器上生成的标记不同： (client) < ! -- react-empty: 1 - (server) < section data-reactro

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

4

1 回答 1

0

版本不兼容问题

解决方案

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

链接：

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

于 2016-07-14T18:58:02.567 回答