'React Router v6 warning on nested index routes
The following code (codesandbox) produces this warning when the root url is navigated to:
You rendered descendant (or called
useRoutes()) at "/" (under<Route path="">) but the parent route path has no trailing "*"...
However, no warning is issued if I navigate to "/post/blah".
import { Routes, Route} from "react-router-dom";
const StreamPage = () => (
<>
<Routes>
<Route index element={<div /> } />
<Route path="post/:subslug/*" element={<div /> }/>
</Routes>
<Routes>
<Route index element={<div />} />
<Route path="post/:subslug/*" element={<div />} />
</Routes>
</>
)
export const App = () => (
<Routes>
<Route path="/" >
<Route path="post/*" element={<StreamPage />} />
<Route index element={<StreamPage />} />
</Route>
</Routes>
)
I know, I could fix the code by merging the two Routes blocks in StreamPage but I'm asking if this is expected behavior and if so what part of the react-router usage contract/API I'm violating? For instance, am I not allowed to have don't have sibling index routes under an index route? If I don't understand when/why this warning is produced I won't be able to avoid it in the future.
(related to this earlier question)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
