React Router v6中如何为路由添加登录校验条件？

我开发了一个登录注册网站，目前直接在URL输入localhost:3000/home即可打开首页。我希望仅当用户登录后才能访问首页，而非通过直接输入URL访问。以下是我尝试的代码片段：

<Router>
      <Routes>
        <Route path='/' {user && user._id ? element={<Homepage/>} : element={<Login/>}>
        
        <Route path='/login' element={<Login/>}/>
        <Route path='/register' element={<Register/>}/>
      </Routes>
    </Router>

问题分析 #

你当前的写法有两处明显问题：

• Route组件的element属性写法不符合React语法规范，不能把条件判断直接写在属性外部；
• 没有针对目标路径/home做权限控制，且未登录时直接渲染登录页会导致路径混乱，正确做法是用重定向来统一处理。

正确实现方式 #

推荐使用路由守卫组件来统一处理权限校验，代码更清晰且可复用：

1. 编写路由守卫组件

function ProtectedRoute({ children }) {
  // 替换成你实际获取用户登录状态的逻辑（比如从Context、Redux或localStorage读取）
  const user = ...; 

  // 未登录则重定向到登录页
  if (!user || !user._id) {
    return <Navigate to="/login" replace />;
  }

  // 已登录则渲染受保护的页面内容
  return children;
}

2. 配置路由规则

import { Router, Routes, Route, Navigate } from 'react-router-dom';

// ...其他组件导入

<Router>
  <Routes>
    {/* 公开路由：无需登录即可访问 */}
    <Route path="/login" element={<Login />} />
    <Route path="/register" element={<Register />} />
    
    {/* 受保护的首页路由：必须登录才能访问 */}
    <Route 
      path="/home" 
      element={
        <ProtectedRoute>
          <Homepage />
        </ProtectedRoute>
      } 
    />
    
    {/* 默认路由：访问根路径时重定向到登录页（可根据需求调整） */}
    <Route path="/" element={<Navigate to="/login" replace />} />
  </Routes>
</Router>

补充说明 #

• 用户直接输入localhost:3000/home时，若未登录会自动跳转到登录页面；
• 登录成功后，调用navigate("/home")即可跳转到首页；
• 确保登录状态能持久化（比如存在localStorage），避免页面刷新后丢失登录信息导致被重定向。

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