如何动态添加重定向到react-router?

时间:2015-09-27 03:25:26

标签: reactjs flux react-router

我已登录组件,该组件应该可供未经身份验证的用户使用。在身份验证之后,此组件应该变得不可用。

   var routes = (
      <Route handler={App}>
        <Route name="signIn" handler={signIn}/>
        {/* redirect, if user is already authenticated */}
        { localStorage.userToken ? (
            <Redirect from="signIn" to="/user"/>
          ) : null
        }
      </Route>
    );

Router.run(routes, (Handler, state) => {
  React.render(<Handler {...state}/>, document.getElementById('main'));
});

如果用户在身份验证后出于任何原因重新加载了webapp,则此代码非常有用,但当然如果用户没有重新加载webapp则不会。 我已经尝试使用this.context.router.transitionTo权限来使用SignUp组件,但它工作得很糟糕 - 组件被渲染,然后这个脚本就会被执行。

所以我想将重定向添加到routes变量中,以使路由器重定向,甚至不用尝试渲染组件。

1 个答案:

答案 0 :(得分:23)

我建议采用另一种方法,而不是检查你的auth-flow并有条件地渲染特定的路线:

如果您正在使用react-router 0.13.x,我建议您在需要检查身份验证时使用组件上的willTransitionTo methods。当处理程序即将渲染时调用它,使您有机会中止或重定向转换(在这种情况下,检查用户是否经过身份验证,如果没有,则重定向到另一个路径)。请参阅此处的auth-flow示例:https://github.com/ReactTraining/react-router/blob/v0.13.6/examples/auth-flow/app.js

对于版本&gt; 0.13.x,它将是onEnterEnterhooks。请参阅此处的auth-flow示例:https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js

基本上,您将身份验证流程从routes变量移开,转移到转换事件/挂钩中。在路由处理程序实际呈现之前,请检查auth,并将用户重定向到另一个路由。