React routes does't accept the components

April 14, 2022

I wrote a code to show some components when the user goes to a certain path, in this case when the user goes to the "/" path it should return a Header and Home components, but I got those errors :

the errors :

uncaught Error: [Header] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
    at invariant (router.ts:5:1)
    at components.tsx:291:1
    at react.development.js:1195:1
    at react.development.js:1158:1
    at mapIntoArray (react.development.js:1049:1)
    at mapIntoArray (react.development.js:1099:1)
    at mapChildren (react.development.js:1157:1)
    at Object.forEachChildren [as forEach] (react.development.js:1194:1)
    at createRoutesFromChildren (components.tsx:275:1)
    at components.tsx:306:1
invariant @ router.ts:5
(anonymous) @ components.tsx:291
(anonymous) @ react.development.js:1195
(anonymous) @ react.development.js:1158
mapIntoArray @ react.development.js:1049
mapIntoArray @ react.development.js:1099
mapChildren @ react.development.js:1157
forEachChildren @ react.development.js:1194
createRoutesFromChildren @ components.tsx:275
(anonymous) @ components.tsx:306
(anonymous) @ react.development.js:1195
(anonymous) @ react.development.js:1158
mapIntoArray @ react.development.js:1049
mapChildren @ react.development.js:1157
forEachChildren @ react.development.js:1194
createRoutesFromChildren @ components.tsx:275
Routes @ components.tsx:256
renderWithHooks @ react-dom.development.js:16141
mountIndeterminateComponent @ react-dom.development.js:20838
beginWork @ react-dom.development.js:22342
callCallback @ react-dom.development.js:4157
invokeGuardedCallbackDev @ react-dom.development.js:4206
invokeGuardedCallback @ react-dom.development.js:4270
beginWork$1 @ react-dom.development.js:27243
performUnitOfWork @ react-dom.development.js:26392
workLoopSync @ react-dom.development.js:26303
renderRootSync @ react-dom.development.js:26271
performConcurrentWorkOnRoot @ react-dom.development.js:25577
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
router.ts:5 Uncaught Error: [Header] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
    at invariant (router.ts:5:1)
    at components.tsx:291:1
    at react.development.js:1195:1
    at react.development.js:1158:1
    at mapIntoArray (react.development.js:1049:1)
    at mapIntoArray (react.development.js:1099:1)
    at mapChildren (react.development.js:1157:1)
    at Object.forEachChildren [as forEach] (react.development.js:1194:1)
    at createRoutesFromChildren (components.tsx:275:1)
    at components.tsx:306:1
invariant @ router.ts:5
(anonymous) @ components.tsx:291
(anonymous) @ react.development.js:1195
(anonymous) @ react.development.js:1158
mapIntoArray @ react.development.js:1049
mapIntoArray @ react.development.js:1099
mapChildren @ react.development.js:1157
forEachChildren @ react.development.js:1194
createRoutesFromChildren @ components.tsx:275
(anonymous) @ components.tsx:306
(anonymous) @ react.development.js:1195
(anonymous) @ react.development.js:1158
mapIntoArray @ react.development.js:1049
mapChildren @ react.development.js:1157
forEachChildren @ react.development.js:1194
createRoutesFromChildren @ components.tsx:275
Routes @ components.tsx:256
renderWithHooks @ react-dom.development.js:16141
mountIndeterminateComponent @ react-dom.development.js:20838
beginWork @ react-dom.development.js:22342
callCallback @ react-dom.development.js:4157
invokeGuardedCallbackDev @ react-dom.development.js:4206
invokeGuardedCallback @ react-dom.development.js:4270
beginWork$1 @ react-dom.development.js:27243
performUnitOfWork @ react-dom.development.js:26392
workLoopSync @ react-dom.development.js:26303
renderRootSync @ react-dom.development.js:26271
recoverFromConcurrentError @ react-dom.development.js:25689
performConcurrentWorkOnRoot @ react-dom.development.js:25589
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 2 more frames
react-dom.development.js:18525 The above error occurred in the <Routes> component:

    at Routes (http://localhost:3000/static/js/bundle.js:49707:5)
    at Router (http://localhost:3000/static/js/bundle.js:49640:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:48449:5)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18525
update.callback @ react-dom.development.js:18558
callCallback @ react-dom.development.js:13092
commitUpdateQueue @ react-dom.development.js:13113
commitLayoutEffectOnFiber @ react-dom.development.js:23204
commitLayoutMountEffects_complete @ react-dom.development.js:24461
commitLayoutEffects_begin @ react-dom.development.js:24447
commitLayoutEffects @ react-dom.development.js:24385
commitRootImpl @ react-dom.development.js:26651
commitRoot @ react-dom.development.js:26517
finishConcurrentRender @ react-dom.development.js:25731
performConcurrentWorkOnRoot @ react-dom.development.js:25648
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
router.ts:5 Uncaught Error: [Header] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
    at invariant (router.ts:5:1)
    at components.tsx:291:1
    at react.development.js:1195:1
    at react.development.js:1158:1
    at mapIntoArray (react.development.js:1049:1)
    at mapIntoArray (react.development.js:1099:1)
    at mapChildren (react.development.js:1157:1)
    at Object.forEachChildren [as forEach] (react.development.js:1194:1)
    at createRoutesFromChildren (components.tsx:275:1)
    at components.tsx:306:1

and this is my App.js source code :

import './App.css';
import Header from './Main__components/Header';
import Home from './Main__components/Home';
import {BrowserRouter as Router , Routes, Route} from "react-router-dom"
import React from 'react';

function App() {
  return (
    <div className="App">
      <Router>
       <Routes>
         <Route path='/'>
            <Header />
            <Home />
            
         </Route>
       </Routes>
      </Router>


    </div>
  );
}

export default App;

I tried to solve this for hours now and honestly, I don’t have any more ideas
any ideas, please?

>Solution :

Other Route components are the only valid children of the Route component. Render all the routed content on the element prop.

Example:

<Router>
  <Routes>
    <Route
      path='/'
      element={(
        <>
          <Header />
          <Home />
        </>
      )}
    />
  </Routes>
</Router>

If you are wanting to render the Header component with several routes then use what is called a layout route to render the Header component along with an Outlet for nested routes to be rendered into.

Example:

import { Outlet } from 'react-router-dom';

const HeaderLayout = () => (
  <>
    <Header />
    <Outlet />
  </>
);

…

<Router>
  <Routes>
    <Route element={<HeaderLayout />}>
      <Route path='/' element={<Header />} />
      ... other routes with header
    </Route>
    ... routes w/o header
  </Routes>
</Router>