重定向路由器中的所有路由

Posted 2021-04-16

我有一个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>
  );
}

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

答案

一种方法是使用重定向到注册的更高阶组件替换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>
  );
 }

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