Question

我有一个React / Redux应用程序，如果用户还没有完成注册过程，如果他们再次登录我想让他们被重定向到他们所在的步骤的注册路线，无论他们尝试去哪条路线至。对于我这样做的最佳方法是什么，而不必为我的每条路线制作一条自定义路线？这是我的基本路由器：

render() {
  return (
   <Router history={history}>
     <Switch>
       <HomeRoute exact path="/" publicComp={Start} privateComp={Rooms}/>
       <Route path="/login" component={Login}/>
       <Route path="/signup" component={SignUpMain}/>
    </Switch>
   </Router>
  );
}

理想情况下，我可以在所有这些路线上说“如果注册未完全重定向到/注册”。有没有办法做到这一点？

Answer 1

一种方法是使用重定向到注册的更高阶组件替换您的Route组件。

const RedirectRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
        <Redirect
          to="/signup"
        />
    }
  />
);

如果您使用上面的路由器将更高阶的组件添加到文件的底部，那么您可以像这样替换路由组件......

render() {
  return (
   <Router history={history}>
     <Switch>
       <RedirectRoute exact path="/" render={() => <HomeRoute exact path="/" publicComp={Start} privateComp={Rooms}/>}/>
       <RedirectRoute path="/login" component={Login}/>
       <Route path="/signup" component={SignUpMain}/>
    </Switch>
   </Router>
  );
 }

如果您想将高阶组件保留在单独的文件中，那么只需像导入其他任何组件一样导入它。

重定向路由器

1 个答案: