Question

我需要使用react-router从服务器端的另一个页面重定向页面。我编写的代码在客户端工作，但不在服务器渲染中。你可以在这里找到代码：

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挂钩在match的上下文中运行，因此React Router可以接听replaceState个调用并通知所请求转换的match回调。在componentWillMount运行时，match已经调用了回调。

在服务器上呈现时，您最有可能需要构建一些更高级别的抽象来管理history.replaceState调用，然后在ReactDOM.renderToString返回后执行相应的操作。

Answer 2

处理此问题的几种不同方法：

1 - 如果您可以在客户端实际发生重定向，则可以执行类似

的操作

history.push('/newPath/');

这是我使用的解决方案，以便不会有两种不同的重定向（在客户端和服务器上）。在我的情况下，我传入了一个“上下文”道具（仅用于代码的服务器端部分，所以我的方法看起来更像

componentWillMount() {
  if (this.props.context) { // context only available on server side
    this.props.context.doLogout();
  }
  this.props.history.push('/newPath/');
}

2 - 如果您真的希望服务器进行重定向，那么您必须从快速或您正在使用的任何框架传递响应对象：

componentWillMount() {
  // you may have to this.props.history.push('/currentPath');
  this.props.res.redirect(302, '/newPath/');
}

如果有必要，请尽快详细说明 - 我花了一些时间来讨论这个并选择了前一个解决方案（代码简单而非正确，但无论对你有用）。

反应路由器1 @ rc1服务器端重定向

2 个答案: