converting react router to v6

Question

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!

Answer 1

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