React中Routes内无法使用自定义PrivateRoute的问题求助

问题描述 #

我跟着视频开发React登录服务，但遇到了问题。我对JavaScript和React了解不多，见谅。我想做一个PrivateRoute组件，只让登录用户访问对应的路由。用普通Route标签时网站正常，但换成自定义PrivateRoute标签就报错，提示Routes标签里只能放Route或React.Fragment组件。我猜是视频里的React和NPM版本和我现在用的不一样，想问下现在实现登录用户专属路由的通用方案是什么？

相关代码 #

./contexts/PrivateRoute.js

import React from 'react';
import { Route, Navigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

export default function PrivateRoute({ element: Element, ...rest }) {
    const { currentUser } = useAuth();
 
    return (
        <Route 
            {...rest} 
            render={props => {
                return currentUser ? <Route {...rest} element={<Element {...props} />} /> : <Navigate to="/login" replace={true} />;
            }}  
        />
    );
}

./components/App.js

import React from "react";
import Signup from './Signup';
import Dashboard from './Dashboard';
import Login from './Login';
import { Container } from 'react-bootstrap';
import { AuthProvider } from '../contexts/AuthContext';
import {BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';

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>                                                  // 问题出在这里，不允许在Routes内用PrivateRoute标签
              <PrivateRoute exact path="/" element={<Dashboard />} />
              <Route path="/signup" element={<Signup />} />
              <Route path="/login" element={<Login />} />
            </Routes>
          </AuthProvider>
        </Router>
      </div>
    </Container>    
  );
}

export default App;

报错信息：

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

解决方案 #

你遇到的问题核心是React Router v6彻底重构了路由体系，不再支持v5中自定义Route组件嵌套的写法，v6强制要求Routes下只能直接放置Route组件。下面是两种当前通用的私有路由实现方案：

方案一：封装路由守卫组件（推荐）

修改PrivateRoute，让它成为一个负责权限判断的守卫组件，直接包裹需要保护的页面：

import React from 'react';
import { Navigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

export default function PrivateRoute({ children }) {
    const { currentUser } = useAuth();
 
    // 有登录用户则渲染目标页面，否则跳转到登录页
    return currentUser ? children : <Navigate to="/login" replace />;
}

然后在App.js中这样使用：

import React from "react";
import Signup from './Signup';
import Dashboard from './Dashboard';
import Login from './Login';
import { Container } from 'react-bootstrap';
import { AuthProvider } from '../contexts/AuthContext';
import {BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';

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包裹需要保护的Dashboard */}
              <Route path="/" element={
                <PrivateRoute>
                  <Dashboard />
                </PrivateRoute>
              } />
              <Route path="/signup" element={<Signup />} />
              <Route path="/login" element={<Login />} />
            </Routes>
          </AuthProvider>
        </Router>
      </div>
    </Container>    
  );
}

export default App;

方案二：直接在Route内写判断逻辑（简洁版）

如果不想单独封装组件，也可以直接在Route的element属性里完成权限判断：

<Routes>
  <Route 
    path="/" 
    element={
      useAuth().currentUser ? <Dashboard /> : <Navigate to="/login" replace />
    } 
  />
  <Route path="/signup" element={<Signup />} />
  <Route path="/login" element={<Login />} />
</Routes>

关键说明 #

• React Router v6移除了v5中的render、component属性，统一使用element传递组件
• Routes组件的直接子元素只能是Route或React.Fragment，不能自定义路由组件
• 私有路由的核心逻辑始终是：判断用户登录状态，决定渲染目标页面还是跳转登录页

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