reactjs - React router 1@rc1 服务器端重定向

Question

我需要使用 react 路由器从服务器端的另一个页面重定向页面。我编写的代码可以在客户端运行，但不能在服务器渲染中运行。您可以在这里找到代码:

https://github.com/jurgob/iso-login/blob/e26af0152896a949435db62549027b2683276db7/src/shared/components/LoginPage.js

这是/src/shared/components/LoginPage.js内的重定向代码:

componentWillMount() {
    ...
    this.props.history.replaceState(null, '/home');
  }

注意:

如果你看https://github.com/jurgob/iso-login/blob/e26af0152896a949435db62549027b2683276db7/src/shared/routes.js

我做到了:

function requireAuth(nextState, replaceState) {
  // replaceState({ nextPathname: nextState.location.pathname }, '/login');
}
...
<Route path="home" component={HomePage} onEnter={requireAuth} />

此代码可以正常工作，但我想在组件内部进行重定向

Answer 1

React Router 中没有内置功能来处理服务器端组件内的重定向。

这是因为 onEnter 钩子(Hook)在 match 的上下文中运行，因此 React Router 可以接收 replaceState 调用并通知 所请求转换的 >match 回调。当 componentWillMount 运行时，match 已经调用了回调。

您很可能必须构建一些更高级别的抽象，以在服务器上渲染时检测 history.replaceState 调用，然后在 ReactDOM.renderToString 之后采取适当的操作 返回。