React Router中ProtectedRoute无法在Routes内使用的问题求助

React Router v6 重构了路由核心逻辑，Switch 被 Routes 取代，且 Routes 仅允许直接嵌套 Route 组件，同时移除了旧版的 component/render 属性，改用 element 传递组件实例。以下是适配后的完整代码方案：

1. 重构 ProtectedRoute 组件 #

将原基于 Route 扩展的写法改为路由守卫组件模式，直接根据登录状态渲染目标组件或重定向：

// protectedRoutes.js
import React from 'react'
import { Navigate } from 'react-router-dom'
import { useSelector } from 'react-redux'

const ProtectedRoute = ({ children }) => {
  const isLoggedIn = useSelector(state => state.authReducer.isLoggedIn)

  // 已登录则渲染子组件，未登录重定向到登录页
  return isLoggedIn ? children : <Navigate to='/login' replace />
}

export default ProtectedRoute

2. 更新 App.js 路由配置 #

替换 Switch 为 Routes，使用 element 属性传递组件，并将需要保护的路由用 ProtectedRoute 包裹：

// app.js
import React from 'react';
import Login from './components/Auth/Login'
import Register from './components/Auth/Register'
import Chat from './components/Chat/Chat'
import ProtectedRoute from './components/Router/ProtectedRoute'

// 引入v6版本的Routes和Route
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          {/* 受保护的首页路由 */}
          <Route path='/' element={
            <ProtectedRoute>
              <Chat />
            </ProtectedRoute>
          } />
          <Route path='/login' element={<Login />} />
          <Route path='/register' element={<Register />} />
          {/* 404路由：匹配所有未定义路径 */}
          <Route path='*' element={<h1>404 page not found</h1>} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

3. 登录成功后重定向到首页 #

在登录组件中，使用 useNavigate 钩子实现登录成功后的跳转：

// 示例：Login组件中的登录逻辑
import { useNavigate } from 'react-router-dom'

const Login = () => {
  const navigate = useNavigate()

  const handleLogin = async () => {
    // 执行登录请求逻辑（接口调用、状态更新等）
    await loginRequest()
    // 登录成功后跳转到首页，replace属性避免回退到登录页
    navigate('/', { replace: true })
  }

  return (
    // 登录表单代码...
  )
}

关键说明 #

• ProtectedRoute 现在作为高阶组件，仅负责校验登录状态，不再依赖 Route 组件
• Routes 下的 Route 必须通过 element 传递组件实例，不能再使用旧版的 component 属性
• Navigate 的 replace 属性会替换当前历史记录，避免用户通过浏览器回退按钮回到登录页

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