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

问题描述 投票:1回答: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)时才有效,但它会将/#/ hash前缀添加到我的url(我不想发生)。

当我离开let(history = browserHistory)时,它会抛出一个错误

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

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

match react-router universal serverside-rendering
1个回答
0
投票

版本不兼容问题

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

链接:

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

© www.soinside.com 2019 - 2024. All rights reserved.