將反應路由器轉換為v6

嘗試將現有應用程式轉換為使用react-router v6時，我收到一條錯誤訊息：

錯誤：A<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 的第一天，所以任何和所有幫助都將不勝感激。謝謝！

uj5u.com熱心網友回復：

Routes組件到Route組件的整體結構是正確的，但是路由組件應該在elementprop上呈現為 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>
  );
}

標籤：反应 反应路由器 反应路由器-dom

上一篇：在來自DB、React的標簽中顯示資料值

下一篇：如何在.map中呼叫ASYNC函式以在REACT中填充表？