在React Router中以编程方式在哪里重新路由？

Question

Suppose I have some component that is connected to react router and redux. I want the component to automatically re-direct to another route when the state "isLoggedIn" becomes false. This is what I have so far:

withRouter(connect(
    state => ({
      isLoggedIn: selectors.getIsLoggedIn(state),
    })
  )(
    class AdminGate extends React.Component {
      render() {
        const { isLoggedIn, router, ...restProps } = this.props;
        if (!isLoggedIn) {
          router.push('/');
        }
        return isLoggedIn ? <InnerComponent {...restProps} /> : <div>Prohibited</div>;
      }
    }
  ))

Current the below works but I see an error in the console:

warning.js:44 Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

If I moved this logic to componentWillMount , it obviously only runs once.

What is the right way to set something like this up? I understand I could possibly amend the logOut method to do the router.push but that doesn't feel ideal. I'd prefer the component to handle that based on the state.

Answer 1

我认为您可以尝试使用componentWillUpdate(nextProps, nextState)生命周期方法以查看其是否已登录。