如何在React中复用PrivateRoute限制已登录用户访问指定路由？

方法一：扩展现有PrivateRoute（无需新增组件） #

你可以给现有的PrivateRoute添加一个参数，用来区分两种路由规则：私有路由（未登录用户禁止访问）和公共限制路由（已登录用户禁止访问）。

修改后的PrivateRoute代码：

function PrivateRoute({ children, restrictAuth = false }) {
  const user = JSON.parse(localStorage.getItem('user'));
  
  // 处理已登录用户禁止访问的路由（如登录、注册）
  if (restrictAuth) {
    return user ? <Navigate to="/" /> : children;
  }
  
  // 原有私有路由逻辑：未登录用户跳转到登录页
  return user ? children : <Navigate to="/login" />;
}

然后更新路由配置，给需要限制已登录用户的路由加上restrictAuth={true}：

<BrowserRouter>
  <MenuBar />
  <Routes>
    <Route path='/' element={<PrivateRoute><Dashboard /></PrivateRoute>} />
    <Route path='/register' element={<PrivateRoute restrictAuth={true}><RegisterUser /></PrivateRoute>} />
    <Route path='/login' element={<PrivateRoute restrictAuth={true}><LoginUser /></PrivateRoute>} />
    <Route path='/profile' element={<PrivateRoute><Profile /></PrivateRoute>} />
    <Route path='/forgotpassword' element={<PrivateRoute restrictAuth={true}><ForgotPassword /></PrivateRoute>} />
  </Routes>
</BrowserRouter>

这个方法不需要修改任何业务组件，只需要调整PrivateRoute和路由配置即可满足需求。

方法二：拆分独立路由组件（更优的可维护方案） #

如果希望路由逻辑更清晰、职责单一，可以新增一个PublicRoute组件专门处理已登录用户禁止访问的路由，原有PrivateRoute保留原逻辑不变。

新增PublicRoute组件：

function PublicRoute({ children }) {
  const user = JSON.parse(localStorage.getItem('user'));
  return user ? <Navigate to="/" /> : children;
}

更新路由配置：

<BrowserRouter>
  <MenuBar />
  <Routes>
    <Route path='/' element={<PrivateRoute><Dashboard /></PrivateRoute>} />
    <Route path='/register' element={<PublicRoute><RegisterUser /></PublicRoute>} />
    <Route path='/login' element={<PublicRoute><LoginUser /></PublicRoute>} />
    <Route path='/profile' element={<PrivateRoute><Profile /></PrivateRoute>} />
    <Route path='/forgotpassword' element={<PublicRoute><ForgotPassword /></PublicRoute>} />
  </Routes>
</BrowserRouter>

这种拆分方式让每个路由组件的逻辑更单一，后期维护和扩展更方便，同样不需要修改业务组件。

内容的提问来源于stack exchange，提问作者Keshav