javascript - 如何组织授权的react路线？

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" />}
 />