React Router v6报错：PrivateRoute非Route组件问题及代码修改咨询

错误原因 #

React Router v6对<Routes>组件的子元素做了严格限制，只有<Route>或<React.Fragment>可以直接作为它的子组件。你之前自定义的<PrivateRoute>是普通组件，不符合这个要求，因此触发了报错。

重构方案一：将PrivateRoute改为权限包裹组件 #

把PrivateRoute改成用来包裹需要权限验证的页面元素，而非返回<Route>组件：

1. 重构PrivateRoute组件 #

import React from 'react';
import { Navigate } from 'react-router-dom';

// 接收children属性，验证通过则渲染子组件，否则跳转到登录页
const PrivateRoute = ({ children }) => {
  const hasToken = localStorage.getItem('token');
  return hasToken ? children : <Navigate to="/login" replace />;
};

2. 修改App组件的路由配置 #

注意：React Router v6已移除exact属性，默认路由匹配就是精确匹配，无需再添加；另外你原代码中导入Spreadsheet时存在笔误（写成了Spreadsheetester），需要修正：

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Login from './Login';
import Spreadsheet from './Spreadsheet';
import PrivateRoute from './PrivateRoute'; // 若PrivateRoute在同一文件则无需单独导入

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        {/* 用PrivateRoute包裹需要权限的页面组件 */}
        <Route 
          path="/" 
          element={
            <PrivateRoute>
              <Spreadsheet />
            </PrivateRoute>
          } 
        />
      </Routes>
    </Router>
  );
};

export default App;

重构方案二：使用useRoutes配置式路由 #

React Router v6提供了useRoutes钩子，可以用配置对象的方式定义路由，更简洁地处理权限逻辑：

import React from 'react';
import { BrowserRouter as Router, useRoutes, Navigate } from 'react-router-dom';
import Login from './Login';
import Spreadsheet from './Spreadsheet';

const AppRoutes = () => {
  const hasToken = localStorage.getItem('token');

  // 用数组配置所有路由规则
  return useRoutes([
    { path: '/login', element: <Login /> },
    { 
      path: '/', 
      element: hasToken ? <Spreadsheet /> : <Navigate to="/login" replace /> 
    },
    // 可选：添加404路由，匹配所有未定义的路径
    { path: '*', element: <Navigate to="/login" replace /> }
  ]);
};

const App = () => {
  return (
    <Router>
      <AppRoutes />
    </Router>
  );
};

export default App;

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