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);
}
...

流量为：

提交后，authActions 和 Store 详细说明数据（ajax 调用）。
如果登录尝试成功，AuthStore 会发出 "login" 信号...
...所以我可以执行 notifyLogin()。

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

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

知道发生了什么事吗？

Answer 1

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

将您的应用包装在包含 login/auth 状态的组件中。
渲染时，如果未登录，则渲染登录页面组件，否则，渲染应用程序组件

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

ReactRouter 在通量通知后没有正确重定向

ReactRouter doesn't redirect correctly after flux notification

redirect

flux

ecmascript-6

reactjs

react-router