I have an error message as so when trying to convert an existing app to use react-router v6:

Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

here is my App component (BrowserRouter wraps the app, custom Router component is a child):

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 component contains Routes, and Route as child respectively:

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;

I'm not sure what this error means relative to my architecture. It seems to check out to me, of course I know something is missing somewhere. This is day one for me of ever using router v6 so any and all help would be greatly appreciated. Thanks!

CodePudding user response：

The overall structure of Routes component to Route components is correct, but the routed components should be rendered as JSX, not a reference to a React component, on the element prop.

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>
  );
}