Question

如何使用反应路由器3在React组件中进行路由重定向？

如果我像这样使用'guard'组件：

const GuardContainer = (props) => {

    const {ok} = isOk(props)

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

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

然后React抱怨用

改变状态

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

Answer 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" />;
}

尝试或类似的尝试。

Answer 2

react-router v3的决定：


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

    export default function GuardContainer(props) {
        const {ok} = isOk(props);

        if (!ok) {
            // Redirect here  to /not-ok
            browserHistory.push('/not-ok');
        }

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

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

2 个答案: