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>

Answer 1

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:

1. Render IndividualPlanning exactly on path "/planning"
2. Render IndividualPlanning also on path "/planning/individual"
3. 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