升级React应用到react-router v6时遇Route需为Routes子元素错误如何解决

触发报错的核心原因 #

• 如果你启用了注释的PrivateRoute组件，大概率是私有路由写法不符合v6规范：React Router v6不支持v5版本的自定义Route组件写法，如果你写的PrivateRoute内部直接返回Route组件，再将PrivateRoute作为Routes的子元素使用，就会触发该报错。因为此时Route的直接父元素是自定义的PrivateRoute而非官方的Routes组件，不符合v6的要求。
• Route组件element属性传值不合法：React Router v6要求element属性必须传入已实例化的JSX元素，你当前直接传入组件引用（如element={HomePage}）属于非法写法，必须改为element={<HomePage />}的格式。
• 冗余的废弃属性：React Router v6默认采用精确路由匹配规则，不需要额外添加exact属性，该属性在v6中已被废弃，直接删除即可。
• 命名冲突隐患：你的自定义路由组件命名为Router，和React Router官方导出的基础Router组件重名，容易引发不可预期的引入冲突，建议改名为AppRoutes之类的唯一命名。
• 路由权限逻辑写法错误：你当前给Route直接展开props的写法无法实现权限拦截效果，私有路由逻辑需要集成到element属性的JSX逻辑中，不能直接透传props给Route组件。

修复后代码示例 #

自定义路由组件 #

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

import CompanyDetailsPage from '../../components/pages/company-details';
import DashboardPage from '../../components/pages/dashboard';
import HomePage from '../../components/pages/home';
import MessagesPage from '../../components/pages/messages';
import MyClientsPage from '../../components/pages/my-clients';
import Privacy from '../../components/pages/privacy';
import ProviderClientsPage from '../../components/pages/provider-clients';
import ProfilePage from '../../components/pages/profile';
import TermsPage from '../../components/pages/terms';
import ServiceDiscoveryPage from '../../components/pages/service-discovery';
import OnBoarding from '../../components/pages/onboarding/onBoarding';

// 改名避免和官方组件命名冲突
function AppRoutes(props) {
  // 示例从props获取权限状态，可根据你的实际逻辑调整
  const { isLogin } = props;
  return (
    <Routes>
      <Route path='/' element={<HomePage />} />
      <Route path='/privacy' element={<Privacy />} />
      <Route path='/terms' element={<TermsPage />} />

      <Route path='/dashboard' element={isLogin ? <DashboardPage /> : <Navigate to="/" />} />
      <Route path='/profile' element={isLogin ? <ProfilePage /> : <Navigate to="/" />} />
      <Route path='/onboarding' element={isLogin ? <OnBoarding /> : <Navigate to="/" />} />
      <Route
        path='/company-details'
        element={isLogin ? <CompanyDetailsPage /> : <Navigate to="/" />}
      />
      <Route
        path='/company-clients'
        element={isLogin ? <ProviderClientsPage /> : <Navigate to="/" />}
      />
      <Route path='/my-clients' element={isLogin ? <MyClientsPage /> : <Navigate to="/" />} />
      <Route
        path='/service-discovery'
        element={isLogin ? <ServiceDiscoveryPage /> : <Navigate to="/" />}
      />
      <Route path='/messages' element={isLogin ? <MessagesPage /> : <Navigate to="/" />} />
    </Routes>
  );
}

export default AppRoutes;

App组件调整 #

// 替换原Router组件引入
import AppRoutes from './auth/route/router';

// 组件内使用替换，传入你的权限判断状态即可
export default function App() {
  // 示例权限状态，可根据你的实际逻辑获取
  const isLogin = Boolean(localStorage.getItem('token'))
  return (
    <div className='App'>
      <BrowserRouter>
        <AuthDataProvider>
          {/* <MobileHeader /> */}
          <Header />
          <AppRoutes isLogin={isLogin} />
        </AuthDataProvider>
        <Footer />
      </BrowserRouter>
    </div>
  );
}

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