Question

我是反应和流动的新手。事实上，当使用ReactRouter（2.4）

时，我偶然发现了以下问题

我使用hashHistory，我需要重定向到＆＃34; /＆＃34;我在＆＃34; / login＆＃34;的页面登录成功后的页面。

路由器

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会发出＆＃34;登录＆＃34;信号...
...所以我可以执行notifyLogin（）。

问题是：this.props.router.push（＆＃39; /＆＃39;）没有正确重定向，它更改了网址而不是网页（看起来状态刷新没有＆＃ 39;被触发）。

奇怪的是，如果我把this.props.router.push（＆＃39; /＆＃39;）放在handleSubmit函数中，重定向就可以正常工作。

知道发生了什么事吗？

Answer 1

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

将您的应用程序包含在包含登录/身份验证状态的组件中。
on render，如果未登录，则呈现登录页面组件，否则，呈现应用程序组件

＆＃13;

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

＆＃13;

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

1 个答案: