将react路由器转换为v6

Question

在尝试将现有应用程序转换为使用react 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>
  );
}