反应路由器 - 服务器端渲染比赛

问题描述：

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（我不想发生这种情况）。

当我离开设（历史= browserHistory）那里，它抛出一个错误

警告：反应试图重复使用的容器标记，但校验和无效。这通常意味着您正在使用服务器渲染，并且服务器上生成的标记不是客户期望的。 React注入了新的标记来补偿哪些作品，但是你已经失去了许多服务器渲染的好处。相反，请找出为什么客户端或服务器上生成的标记不同：（客户端）<！ - 反应空：1 - （服务器）<部分数据reactro

的错误信息是很清楚，不过，我不明白为什么它的工作原理与hashHistory但未能与browserHistory

答

版本不兼容的问题

解决方案

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

链接：

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

反应路由器 - 服务器端渲染比赛

相关推荐