React Router - 我應該一次渲染所有路由嗎？

Question

假設我有一個應用程序，您可以在其中以用戶或管理員身份登錄，並且我有以下路由：

• 登錄
• 登記
• 家
• 管理面板（僅適用於管理員）
• 我的個人資料（僅對用戶可用）

我會有一個像這樣路由的交換機：

<Switch>
    <UnloggedRoute exact path='/login'>
        <Login />
    </Route>
    <UnloggedRoute exact path='/register'>
        <Register />
    </Route>
    <PrivateRoute exact path='/'>
        <HomePage />
    </Route>
    <AdminRoute exact path='/admin'>
        <Admin />
    </Route>
    <UserRoute exact path='/profile'>
        <Profile />
    </Route>
</Switch>

所以在PrivateRoute我有一個條件來檢查用戶是否登錄，如果沒有，它重定向到/login 。 在AdminRoute它檢查用戶是否是管理員，如果不是，則重定向到/並且在UserRoute我有一個條件來檢查用戶是否是普通用戶，如果不是，則重定向到/ 。

最后，在UnloggedRoute我檢查了用戶是否已登錄。如果是，則轉到/ 。

所以我的問題是：如果用戶是管理員，我應該保持開關不變，還是不應該呈現路由“配置文件”？ 像這樣：

user.isAdmin() && (
    <Route exact path='/admin'>
        <Admin />
    </Route>
)

我覺得第一種方式更具聲明性，更容易理解和管理，但我想聽聽意見......

Answer 1

所以對於我的應用程序，我做了一些與你在第一種方式中所做的非常相似的事情。 我不得不使用 5 種不同的路由來處理 4 種不同的登錄： MainRoute 、 TeacherRoute 、 StudentRoute 、 TutorRoute和AdminRoute 。 對於我的用途，我根本就這些途徑的每一個檢查accountType （或isAdmin()在你的情況下）的路線內本身就像這樣：

const PrivateRouteAdmin = ({ component: RouteComponent, ...rest }) => {
  const { currentUser } = useContext(AuthContext);

  //If login is good, allow access or redirect to login
  if (!!currentUser) {
    return (
      <Route
        {...rest}
        render={routeProps =>
          (currentUser.isAdmin()) ? (
            <RouteComponent {...routeProps}
              currentUser={currentUser} />
          ) : (
              <Redirect to={"/incorrect-login"} />
            )
        }
      />
    )
  } else {
    //Bad login
    return (
      <Route
        {...rest}
        render={() => (
          <Redirect to={"/login"} />
        )}
      />
    )
  }
}

export default PrivateRoutedAdmin;

只要您在路由中檢查這樣的路由，您就不需要在Switch執行isAdmin() 。

此外，為了讓您的Switch內的事情更有條理，我會這樣做：

<AdminRoute exact path='/admin' component={Admin} />