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

Question

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

   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.transitionToSignUp组件,但它工作得很糟糕 - 组件被渲染,然后这个脚本被执行.

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

Answer 1

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

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

对于版本> 0.13.x,它将是onEnter和Enterhooks.请参阅此处的auth-flow示例:https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js

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