React router v6 children routes not displaying correct component

Question

I've got a project using react-router v6.

I have this code:

<Route exact path="planning" element={<PageNotFound />}>
  <Route path="individual" element={<IndividualPlanning />} />
  <Route path="team" element={<TeamPlanning />} />
</Route>

Which is not working at all. When I visit "/planning/individual" it fallbacks on the PageNotFound component. It is the same for "/planning/team" path.

Referring to this feed: Property 'exact' does not exist on type

Even when I don't use exact prop it is the same behavior. The only solution I have would be to use 2 different routes without children, but I'd rather not do this.

EDIT

Using:

<Route path="planning/*" element={<PageNotFound />}>
  <Route index element={<IndividualPlanning />} />
  <Route path="individual" element={<IndividualPlanning />}
  <Route path="team" element={<TeamPlanning />} />
</Route>

This displays only PageNotFound on every routes starting with "/planning"

EDIT 2:

These are the complete routes:

<Routes>
  {!isLogged() ? (
    <>
      <Route path="*" element={<Navigate to={"/login"} />} />
      <Route path="/login" element={<LoginPage />} />
    </>
  ) : (
    <>
      <Route path="*" element={<PageNotFound />} />
      <Route path="/login" element={<Navigate to={"/"} />} />
      <Route path="/" element={<HomePage />} />

      <Route path="/dashboard" element={<Dashboard />} />

      <Route path="planning/*" element={<PageNotFound />}>
        <Route index element={<IndividualPlanning />} />
        <Route path="individual" element={<IndividualPlanning />}
        <Route path="team" element={<TeamPlanning />} />
      </Route>
    </>
  )}
</Routes>

Drew Reese · Accepted Answer · 2023-07-28T16:02:28.967

Issue

The PageNotFound isn't a layout route component. In other words, it's not rendering an Outlet for nested routes to render their element content into.

Solution

If I understand your post correctly you want:

Render IndividualPlanning exactly on path "/planning"
Render IndividualPlanning also on path "/planning/individual"
Render PageNotFound on any "/planning/*" sub-route that isn't already specifically handled.

Render the "/planning" route without an element prop so an Outlet component is rendered by default. Convert the index route to redirect to the "/planning/individual" route. Move the "catch-all" PageNoutFound route out of the "/planning/*" routes to handle any unhandled/unknown routes.

Example:

<Routes>
  {!isLogged() ? (
    <>
      <Route path="*" element={<Navigate to={"/login"} />} />
      <Route path="/login" element={<LoginPage />} />
    </>
  ) : (
    <>
      <Route path="/login" element={<Navigate to="/" replace />} />
      <Route path="/" element={<HomePage />} />

      <Route path="/dashboard" element={<Dashboard />} />

      <Route path="planning">
        <Route index element={<Navigate to="individual" replace />} />
        <Route path="individual" element={<IndividualPlanning />} />
        <Route path="team" element={<TeamPlanning />} />
      </Route>
      <Route path="*" element={<PageNotFound />} />
    </>
  )}
</Routes>

Demo

This is exactly what I was looking for !! +1 for the explanations as well. Thank's! — Enzo, Jul 31 '23 at 06:19

score -1 · Answer 2 · answered Jul 28 '23 at 06:31

-1

React Router v6, you should use the * wildcard instead of exact. Here's the updated code:

    import { Route, Routes } from 'react-router-dom';

function YourComponent() {
  return (
    <Routes>
      <Route path="planning/*" element={<PageNotFound />} >
        <Route index element={<IndividualPlanning />} />
        <Route path="individual" element={<IndividualPlanning />} />
        <Route path="team" element={<TeamPlanning />} />
      </Route>
    </Routes>
  );
}

answered Jul 28 '23 at 06:31

Muhammad Idrees

570
4
10

Using ``` } > } /> } /> } /> ``` is acting just the same, when I visit /planning it displays correctly the not fuond page, but when I go to /planning/individual or /planning/team it keep displaying the not found page – Enzo Jul 28 '23 at 11:24

score -1 · Answer 3 · answered Jul 28 '23 at 06:52

-1

<Route exact path="*" element={<PageNotFound />}>

can you try to write it like this?

answered Jul 28 '23 at 06:52

Mehmet

16
2

I already got this somewhere else in the core routes, but it doesn't display it when the route with path = "planning" is reached. It looks like since the route exist, it doesn't enter the "*" – Enzo Jul 28 '23 at 11:26
@Enzo if you have higher level routes you should post those in case they interecept the route before reaching this point. – Gabriele Petrioli Jul 28 '23 at 11:54
I doubt its the case, but I edited the question if it can help – Enzo Jul 28 '23 at 12:19
In v6 version it no longer uses nested routes and the exact attribute is no longer used. You can use index instead. Can you try this? }> } /> } /> } /> – Mehmet Jul 31 '23 at 05:57

React router v6 children routes not displaying correct component

3 Answers3

Issue

Solution

Demo