Question

如果您重定向或显示登录页面，如何正确组织索引路由？看起来很乱：

<Switch>
    <Route
      path="/"
      exact
      render={() => (!isLogged ? <Landing /> : <Redirect to="/dashboard" />)}
    />

您也可以将其包装在if-else语句中。

if (!isLogged) {  
   routes = (
   <Route path="/" component={Landing} />
     ....
  )  
} else {
 routes = (
  <Route path="/" render={() => <Redirect to="/dashboard"} />
  .....
  )
}

但这也让人感到混乱……那里有什么解决办法吗？

Answer 1

一种选择是使用包装器组件，如果用户已登录，则该包装器返回<Route />，否则，将返回登陆组件。

const LoggedInRoute = (props) => {
   if(!isLoggedIn) {
      return <Landing />
   }
   return <Route {...props} />
}

用法：

<LoggedInRoute 
   path="/"
   exact
   render={() => <Redirect to="/dashboard" />}
 />

如何组织授权的反应路线？

1 个答案: