服务器端渲染 + 反应路由器重定向

Question

我有一个高阶组件（由下面的wrapAuthComponent 应用），它封装了任何需要身份验证的组件。该组件检查用户是否登录，如果没有，则重定向：

let next = this.props.location.pathname;
this.context.router.push({
    pathname: '/login',
    query: {...this.props.location.query, next}
});

另外，我有一个允许用户登录的导航栏组件：

<IndexLinkContainer to={`/login? next=${this.props.pathname}`}>
    <NavItem className='nav-bar-button'> Login </NavItem>
</IndexLinkContainer>

（上面的pathname prop 是由App 容器传递的）

所以，回顾一下，我的路线是这样绘制的：

<Route component={App} /* app contains the above navbar */ path="/">
    <Route component={LoginPage} path="/login" />
    <Route component={wrapAuthComponent(Foo)} path="/foo" />
</Route>

现在，进入错误。 当我转到/foo 并且没有登录时，我收到以下错误：

React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client)  href="/login?next=/login" data-reactid=
 (server)  href="/login?next=/foo" data-reactid="

我在这里做错了什么？

Answer 1

根据您的 Node.js 和 React 版本，this GitHub issue 可能与您的问题有关。

取自these React docs:

某些版本的 Node.js 具有不保留键顺序的 Object.assign 实现。这可能会在验证标记时导致错误，并创建一个警告说“React 尝试在容器中重用标记，但校验和无效”。如果遇到此问题，您可以覆盖 Object.assign 以使用保留键顺序的 polyfill。

如下安装object-assign 包并设置全局Object.assign 可能会解决您的问题：

Object.assign = require('object-assign');

如果没有，我想我需要查看更多代码才能确定问题。