New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[v6][Bug]: Different behavior between flat paths and nested paths #8458
Comments
Tested and reproduced in 6.1.1 |
Face with same issue: const App: React.FC = () => (
<Routes>
<Route
path="project/*"
element={
<Routes>
<Route path="all" element={<PageProjects />} />
<Route path="*" element={<div>Not found 2</div>} />
</Routes>
}
/>
<Route path="*" element={<div>Not found 1</div>} />
</Routes>
); Receive an error when i try navigate to /project/all
@ryanflorence Need fix of that asap |
Try another way: const App: React.FC = () => (
<Routes>
<Route path="/" element={<WrapperPage />}>
<Route path="project" element={<Outlet />}>
<Route path="all" element={<PageProjects />} />
<Route path="*" element={<div>Not found 3</div>} />
</Route>
<Route path="*" element={<div>Not found 2</div>} />
</Route>
<Route path="*" element={<div>Not found 1</div>} />
</Routes>
); No luck. Receive another 404 error when try navigate to |
Try to reproduce routes structure from official documentation - https://reactrouter.com/docs/en/v6/getting-started/concepts#defining-routes const App: React.FC = () => (
<Routes>
<Route path="/" element={<WrapperPage />}>
<Route index element={<PageProjects />} />
<Route path="project" element={<Outlet />}>
<Route path=":projectId" element={<PageProject />} />
<Route path="all" element={<PageProjects />} />
<Route index element={<PageProjects />} />
</Route>
</Route>
<Route element={<Outlet />}>
<Route path="/profile" element={<PageProfile />} />
</Route>
<Route path="login" element={<PageLogin />} />
</Routes>
); Same 404 error... |
I'm also affected by this issue. Basically: const Outer = () => (
<Routes>
<Route path="foo" element={<Inner />} />
<Route path="*" element={<NotFound />} />
</Routes>
)
const Inner () => {
const params = useParams()
return (
<Routes>
<Route path=":myId" element={<WithId />} />
<Route path="" element={<WithoutId />} />
</Routes>
)
} With the path Changing to Changing to It seems like there needs to be a symbol that means "consider a match, but pass on to a subrouter". Alternatively, it could detect the presence of |
What version of React Router are you using?
6.0.2
Steps to Reproduce
https://stackblitz.com/edit/github-fjqy5d?file=src/App.tsx
Expected Behavior
The path
doesnotwork/a
should display the subpath aActual Behavior
The
InnerRoutes
'Routes
element does not render the corresponding Route element to subpath.The text was updated successfully, but these errors were encountered: