使用 react-router 3 在 React 中的组件内重定向答案

【问题标题】：Redirect inside a component in React with react-router 3使用 react-router 3 在 React 中的组件内重定向
【发布时间】：2017-11-10 07:40:15
【问题描述】：

如何使用 react router 3 在 React 组件中进行路由重定向？

如果我使用这样的“守卫”组件：

const GuardContainer = (props) => {

    const {ok} = isOk(props)

    if (!ok) {
        // Redirect here  to /not-ok      
        return null
    }

    return <WrappedComponent {...props}/>
}

然后 React 抱怨改变状态

在现有状态转换期间无法更新（例如在 render 或其他组件的构造函数）。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

在 React Router V4 中，有一个 <Redirect /> 组件允许您进行渲染并将导航到目标。您可能可以使用browserHistory 在 V3 中制作自己的：

import React from 'react';
import { browserHistory } from 'react-router';

class Redirect extends React.Component {

  componentDidMount() {
    browserHistory.push(this.props.to);
  }

  render() {
    return <div />
  }

}

export default Redirect;

然后用to="/not-ok"渲染它

if (!ok) {
  return <Redirect to="/not-ok" />;
}

试试这个或类似的东西。

【讨论】：

老兄——你帮了我很多忙。很长一段时间以来，我一直在努力寻找解决方案。谢谢大佬

【解决方案2】：

react-router v3 的决定：

从“反应”导入反应；从 'react-router' 导入 { browserHistory }；导出默认函数 GuardContainer(props) { 常量 {ok} = isOk(props); 如果（！确定）{ // 这里重定向到/not-ok browserHistory.push('/not-ok'); } 返回 }

【讨论】：