javascript - 重定向 react 路由器中的所有路由

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

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

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

如果您将高阶组件添加到文件的底部，然后您可以像这样替换 Route 组件......

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

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