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.
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>