通量通知后 ReactRouter 无法正确重定向

Question

我是 React 和 Flux 的新手。事实上，我在使用 ReactRouter (2.4) 时偶然发现了以下问题

我正在使用 hashHistory，在成功登录尝试后，我在“/login”页面时需要重定向到“/”页面。

路由器

ReactDOM.render(
<Router history={hashHistory}>
    <Route path="/" component={App}>
        <IndexRoute component={ErasmusPage} onEnter={authCheck}></IndexRoute>
        <Route path="login"component={withRouter(LoginPage)}></Route>
    </Route>
</Router>, app);

登录页面

constructor() {
    super();
    this.notifyLogin = this.notifyLogin.bind(this);
    this.state = {
        email: "",
        password: ""
    };
}

componentWillMount() {
    authStore.on("login", this.notifyLogin);
}

componentWillUnmount() {
    authStore.removeListener("login", this.notifyLogin);
}

notifyLogin() {
    this.props.router.push('/');
}

...

handleSubmit(e) {
    e.preventDefault();

    let data = {
        email: this.state.email,
        password: this.state.password
    };
    AuthActions.authenticate(data);
}
...

流程是：

1. 提交后，authActions 和 Store 详细说明数据（涉及 ajax 调用）。
2. 如果登录尝试正常，AuthStore 会发出“登录”信号...
3. ...所以我可以执行 notifyLogin()。

问题是：this.props.router.push('/') 没有正确重定向，它改变了 URL 而不是页面（看起来状态刷新没有被触发）。

奇怪的是，如果我将 this.props.router.push('/') 放在 handleSubmit 函数中，重定向会完美运行。

知道发生了什么吗？

Answer 1

到目前为止，这对我来说效果很好：

• 将您的应用包装在包含登录/身份验证状态的组件中。
• 在渲染时，如果未登录，则渲染登录页面组件，否则，渲染应用组件

render() {
  const { isAuthorized, authError} = this.props;
  
  if (isAuthorized) {
    return (<Layout />);
  }
  
  return (<Login authError={authError}/>);
}