React Router v7 splats paths migration issue

Question

I'm trying to create a scenario for migration of React-Router from version 6 to version 7. I have followed the migration steps of the documentation but the routing is not working. I'm stuck and can't figure out what's wrong.

I'm using latest v6 version (6.29) with the v7 flags enabled. Here is a Codesandbox I created.

What I saw is that if I declare the routes like this:

<Route path="about">
  <Route path="*" element={<About />} />
</Route>

even normal routing from main page to about page is not working. But if I declare it like this:

<Route path="about">
  <Route index element={<About />} />
  <Route path="*" element={<About />} />
</Route>

at least main routing is working but child routes aren't working.

Drew Reese · Accepted Answer · 2025-02-25 16:15:18Z

1

You should render one route for the About component that is both an index route and can also match any "/about/*" sub-route.

Example:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="about">
    <Route
      index    // <-- match exactly "/about"
      path="*" // <-- match any "/about/*" path
      element={<About />}
    />
  </Route>
</Routes>

answered Feb 25 at 16:15

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Apostolos Feb 25 at 17:58

Thank you drew!so is documentation wrong? How is this example in the documentation working?

Drew Reese Feb 25 at 18:00

@Apostolos Dunno really, can't say what works and doesn't work from their snippets, but the React-Router documentation is notoriously incomplete... it seems like they give a good high-level overview, but often miss minor/subtle details.

Apostolos Feb 25 at 18:03

Maybe it has sth to do when using outlets.ill dig a little bit further.thank you once again!

Drew Reese Feb 25 at 18:04

@Apostolos Outlets are used for nested routes, i.e. Route rendered by Route, but your code is rendering About which is rendering descendent routes, i.e. a routed component render another Routes and set of Routes. They are rather different things.

Collectives™ on Stack Overflow

React Router v7 splats paths migration issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related