将反应路由器转换为 v6

Question

我在尝试将现有应用转换为使用 react-router v6 时收到一条错误消息：

错误：<Route> 只能用作 <Routes> 的子级 元素，从不直接渲染。请将您的 <Route> 包裹在 <Routes>.

这是我的App 组件（BrowserRouter 包装了应用程序，自定义Router 组件是一个子组件）：

import React from 'react';
import './config';
import './App.css';

import { BrowserRouter } from 'react-router-dom';
import Router from './auth/route/router';

import Header from './components/header';
// import MobileHeader from './components/header/mobileHeader/MobileHeader';
import Footer from './components/footer';
import { AuthDataProvider } from './auth/AuthDataContext';

export default function App() {
  return (
    <div className='App'>
      <BrowserRouter>

        <AuthDataProvider>
          {/* <MobileHeader /> */}
          <Header />
          <Router />
        </AuthDataProvider>
        <Footer />
      </BrowserRouter>
    </div>
  );
}

Router 组件分别包含 Routes 和 Route 作为子组件：

import React from 'react';
import { Route, Routes } from 'react-router-dom';
// import PrivateRoute from './privateRoute';

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 Router(props) {
  return (
    <Routes>
      <Route exact path='/' element={HomePage} />
      <Route exact path='/privacy' element={Privacy} />
      <Route exact path='/terms' element={TermsPage} />

      <Route {...props} path='/dashboard' element={DashboardPage} />
      <Route {...props} path='/profile' element={ProfilePage} />
      <Route {...props} path='/onboarding' element={onBoarding} />
      <Route
        {...props}
        path='/company-details'
        element={CompanyDetailsPage}
      />
      <Route
        {...props}
        path='/company-clients'
        element={ProviderClientsPage}
      />
      <Route {...props} path='/my-clients' element={MyClientsPage} />
      <Route
        {...props}
        path='/service-discovery'
        element={ServiceDiscoveryPage}
      />
      <Route {...props} path='/messages' element={MessagesPage} />
    </Routes>
  );
}

export default Router;

我不确定这个错误相对于我的架构意味着什么。它似乎在检查我，当然我知道某处缺少某些东西。这是我使用路由器 v6 的第一天，因此我们将不胜感激。 谢谢！

Answer 1

Routes 组件到Route 组件的整体结构是正确的，但是路由组件应该在 element 属性上呈现为 JSX，而不是对 React 组件的引用。

function Router(props) {
  return (
    <Routes>
      <Route path='/' element={<HomePage />} />
      <Route path='/privacy' element={<Privacy />} />
      <Route path='/terms' element={<TermsPage />} />

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