Why do I have an error "[Header] is not a <Route> component."?

May 20, 2022

I have a social media app and my App.js looks like this:

<div className="App">
      <Router>
        {!name ? (
          <>
            
            <Login />
          </>
        ) : (
          <Routes>
            <Route exact path="/">
              <Header />
              <Feed />
              <Model />
            </Route>
            <Route exact path="">
              <Navigate to="/" />
            </Route>
          </Routes>
        )}
      </Router>
    </div>

So if user is authorized it redirects us to the main page but if they’re unauthorized, we have a Login page.

But I have the next error in console:

Uncaught Error: [Header] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

What causes this error?

>Solution :

In version 6 of react-router, you’re expected to use the element prop to tell it what to render:

<Route path="/" element={(
  <>
    <Header />
    <Feed />
    <Model />
  </>
)}/>

Adding children to a route is reserved for defining nested routes, as in:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="users" element={<Users />}>
    <Route path="/" element={<UsersIndex />} />
    <Route path=":id" element={<UserProfile />} />
  </Route>
</Routes>