React Router中PrivateRoute非Route组件报错问题求助

大家好，我现在在用Firebase做一个注册登录系统，遇到了React Router的报错，麻烦帮忙看看怎么解决这个问题：

Error : [PrivateRoute] is not a component. All component children of must be a or <React.Fragment>

我的代码如下：

PrivateRoute.js #

import React from "react"
import { Route, Navigate } from "react-router-dom"
import { useAuth } from "./AuthContex"

export default function PrivateRoute({ element: Element, ...rest }) {
  const { currentUser } = useAuth()

  return (
    <Route
      {...rest}
      element={currentUser ? <Element {...rest} /> : <Navigate to="/login" />}
    />
  )
}

App.js #

import Signup from "./components/signup"
import { Container } from "react-bootstrap"
import { AuthProvider, useAuth } from './components/AuthContex'
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import Dashboard from "./components/Dashboard"
import Login from "./components/Login"
import ForgotPassword from "./components/ForgotPassword"
import UpdateProfile from "./components/UpdateProfile"

function App() {
  return (
    <Container
      className="d-flex align-items-center justify-content-center"
      style={{ minHeight: "100vh" }}
     >
      <div className="w-100" style={{ maxWidth: "400px" }}>
        <Router>
          <AuthProvider>
            <Routes>
              <PrivateRoute path="/" element={<Dashboard />} />
              <Route path="/update-profile" element={<UpdateProfile />} />
              <Route path="/signup" element={<Signup />} />
              <Route path="/login" element={<Login />} />
              <Route path="/forgot-password" element={<ForgotPassword />} />
            </Routes>
          </AuthProvider>
        </Router>
      </div>
    </Container>
  )
}

function PrivateRoute({ element, ...rest }) {
  const { currentUser } = useAuth();

  // Redirect to login if not authenticated
  if (!currentUser) {
    return <Navigate to="/login" />;
  }

  // Render the element if authenticated
  return <Route {...rest} element={element} />;
}

export default App

我现在的需求是实现一个需要登录才能访问的私有路由，比如首页的Dashboard，但现在报错说PrivateRoute不是合法的Routes子组件，请问该怎么修改？

问题原因分析 #

首先要明确：React Router v6和旧版本的路由写法差异很大，<Routes>组件只允许直接放置<Route>或<React.Fragment>作为子元素，自定义的<PrivateRoute>直接放在<Routes>里就会触发这个报错。另外你代码里还重复定义了PrivateRoute（一个在单独文件，一个在App.js里），这会导致代码冲突，得先统一。

两种可行的解决方案 #

方案一：把PrivateRoute改成「路由元素包装器」（推荐给简单路由场景）

这种写法符合v6的设计规范，不用自定义Route组件，而是写一个用来保护页面元素的包装组件：

1. 删掉App.js里定义的PrivateRoute，修改PrivateRoute.js的代码：

import React from "react"
import { Navigate } from "react-router-dom"
import { useAuth } from "./AuthContex"

export default function PrivateRoute({ children }) {
  const { currentUser } = useAuth()

  // 未登录跳转到登录页，已登录则渲染传入的页面组件
  return currentUser ? children : <Navigate to="/login" replace />
}

2. 在App.js的Routes里这样使用：

<Routes>
  <Route path="/" element={
    <PrivateRoute>
      <Dashboard />
    </PrivateRoute>
  } />
  <Route path="/update-profile" element={
    <PrivateRoute>
      <UpdateProfile />
    </PrivateRoute>
  } />
  <Route path="/signup" element={<Signup />} />
  <Route path="/login" element={<Login />} />
  <Route path="/forgot-password" element={<ForgotPassword />} />
</Routes>

这样<Routes>的子元素都是合法的<Route>，PrivateRoute只是作为Route的element内容存在，完全符合v6的规则。

方案二：使用嵌套路由+Outlet（适合复杂路由结构）

如果你的私有路由数量多、或者有嵌套子路由需求，用这种方式更简洁：

1. 新建一个PrivateLayout组件：

import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "./AuthContex";

export default function PrivateLayout() {
  const { currentUser } = useAuth();
  if (!currentUser) {
    return <Navigate to="/login" replace />;
  }
  // Outlet会自动渲染匹配到的子路由元素
  return <Outlet />;
}

2. 在App.js里配置嵌套路由：

<Routes>
  {/* 所有需要权限的路由都嵌套在这里 */}
  <Route element={<PrivateLayout />}>
    <Route path="/" element={<Dashboard />} />
    <Route path="/update-profile" element={<UpdateProfile />} />
  </Route>
  {/* 公开路由直接定义 */}
  <Route path="/signup" element={<Signup />} />
  <Route path="/login" element={<Login />} />
  <Route path="/forgot-password" element={<ForgotPassword />} />
</Routes>

这种方式会自动给嵌套在PrivateLayout下的所有路由添加登录校验，非常适合批量处理私有路由。

额外注意点 #

你代码里的AuthContex疑似拼写错误，正确的单词是AuthContext（末尾带t），如果文件名也是这个的话，记得同步修改导入路径，避免出现找不到模块的错误。

备注：内容来源于stack exchange，提问作者HARI-P-T