Nested Dynamic Route with React Router Not Working-CodePudding

    <Routes>
      <Route path="path/*" element={<CarRoutes />} />
    </Routes>

And in CarRoutes

    <Routes>
      <Route path="/cars/:id" element={<CarComponent />} />
    </Routes>

The above approach doesn't seem to work. Am I missing something? I would prefer to have multiple nested routes to keep my infrastructure organized.

CodePudding user response：

I think its illegal to put <Routes> inside another <Routes>. So it should work if you will place all the routes in one file, like

    <Routes>
      <Route path="path">
        <Route path="/cars/:id" element={<CarComponent />} />
      </Route>
    </Routes>
`

CodePudding user response：

If you're using the latest react-router-dom version (v6 as I speak) you can declare all your routes in one place and have as many nested routes as you need. Documentation [here].(https://reactrouter.com/docs/en/v6/components/routes)

<Routes>
  <Route path="/" element={<Dashboard />}>
    <Route
      path="messages"
      element={<DashboardMessages />}
    />
    <Route path="tasks" element={<DashboardTasks />} />
  </Route>
  <Route path="about" element={<AboutPage />} />
</Routes>

The example above is from the documentation.

But you can have simple routes like this:

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="about" element={<AboutPage />} />
  <Route path="contact" element={<Contact />} />
</Routes>

The exactkeyword is to make sure it will only show the Home page when is the actual / path and not the other ones.

and you can have child routes

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="about" element={<AboutPage />} />
  <Route exact path="posts" element={<RecentPosts />} />
  <Route path="posts/:postId" element={<SinglePost />} />
  <Route path="user/:id" element={<User />} />
  <Route path="user/:status" element={<UserStatusList />} />
</Routes>

again the exact keyword on the "posts" path to be sure it won't match that route with the child route

and you can also have nested routes like this:

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="about" element={<AboutPage />} />
  <Route exact path="posts" element={<RecentPosts />} />
  <Route path="posts/:postId" element={<SinglePost />} />
  <Route path="users">
    <Route path=":id" element={<User />} />
    <Route path=":status" element={<UserStatusList />} />
  </Route>
</Routes>

This way the outlets are nested inside their parent route "users".

The default <Route element> is an <Outlet>. This means the route will still render its children even without an explicit element prop, so you can nest route paths without nesting UI around the child route elements.

Additionally the path="path/*" you declared will match any route that starts with "path/...".

For this case of yours I'd do:

<Routes>
  <Route exact path="cars" element={<CarRoutes />} />
  <Route path="cars/:id" element={<CarComponent />} />
</Routes>

I hope that helps you =)