Question 217728 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React router v6 children routes not displaying correct component

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 I fallback on the PageNotFound component. It is the same for /planning/team.

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

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

Any help would be appreciated, thank’s!

Tags:

2

Answers


  1. 0

    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>
  );
}
    Login or Signup to reply.
  2. 0 
    <Route exact path="*" element={<PageNotFound />}>

    can you try to write it like this?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search