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

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>
  );
}

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

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>
  );
 }

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