如何动态添加重定向到 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，则当然不会。 我尝试在 SignUp 组件中使用this.context.router.transitionTo，但效果很糟糕——组件被渲染，然后这个脚本被执行。

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

Answer 1

我会推荐另一种方法，而不是检查您的身份验证流程并有条件地呈现特定路由：

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

对于 >0.13.x 的版本，它将是 onEnter 和 Enterhooks。在此处查看身份验证流程示例：https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js

基本上，您将 auth-check 流程从您的 routes 变量中移出，并进入转换事件/挂钩。在实际渲染路由处理程序之前，检查身份验证并将用户重定向到另一个路由。