React Router - 我应该一次渲染所有路由吗？答案

【问题标题】：React Router - Should I render all the routes at once?React Router - 我应该一次渲染所有路由吗？
【发布时间】：2020-11-10 14:08:21
【问题描述】：

假设我有一个应用程序，您可以在其中以用户或管理员身份登录，并且我有以下路由：

登录
注册
首页
管理面板（仅供管理员使用）
我的个人资料（仅供用户使用）

我会有这样的路由开关：

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

我觉得第一种方式更具陈述性，更易于理解和管理，但我想听听意见......

【问题讨论】：

标签： javascript reactjs react-router

【解决方案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} />

【讨论】：