React Router报错：[PrivateRoute]不是<Route>组件问题求助

错误原因 #

react-router-dom v6 对<Routes>的直接子组件有严格限制，必须是<Route>或<React.Fragment>。你之前的写法将自定义的<PrivateRoute>直接作为<Routes>的子组件，不符合v6的路由规则，因此触发报错。

修改方案 #

1. 重构PrivateRoute组件 #

将PrivateRoute改为接收需要保护的组件作为element属性，根据用户登录状态返回目标组件或跳转至登录页：

import { Navigate } from "react-router-dom"
import { useContext } from "react"
import AuthContext from "../context/AuthContext"

const PrivateRoute = ({ element }) => {
    const { user } = useContext(AuthContext)
    // 已登录则渲染目标组件，未登录则跳转至登录页（replace避免回退到登录页）
    return user ? element : <Navigate to="/login" replace />
}

export default PrivateRoute

2. 修改App.js中的路由使用方式 #

将PrivateRoute作为<Route>的element属性值传入，而不是直接作为<Routes>的子组件：

import React from 'react'
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"
import { AuthProvider } from './context/AuthContext'
import './app.css'
import Dashboard from './views/Dashboard'
import PrivateRoute from "./utils/PrivateRoute"
import Home from './Components/Home/Home'
import Main from './Components/Main/Main'
import Navbar from './Components/Navbar/Navbar'
import Footer from './Components/Footer/Footer'
import Loginpage from './views/Loginpage'

const App = () => {
  return (
    <Router>
      <AuthProvider>
        <Navbar/>
        <Routes>
          {/* 用PrivateRoute包裹Dashboard组件，作为Route的element */}
          <Route path="/dashboard" element={<PrivateRoute element={<Dashboard />} />} />
          <Route path="/login" element={<Loginpage/>}/>
        </Routes>
        <Home/>
        <Main/>
        <Footer/>
     </AuthProvider>
    </Router>
  )
}

export default App

补充说明 #

这种写法完全符合react-router-dom v6的路由规范，<Routes>的直接子组件都是<Route>，而PrivateRoute作为路由元素的包装组件，负责处理登录状态的校验与跳转逻辑。

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