You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have two levels of nested <Routes>
One at the top level with an <Outlet> and catch-all for a <NotFound> element.
And also multiple nested <Routes> corresponding to sections of the website such as /streams/*, /admin/* with a sidebar as a sibling and catch-all <NotFound> element.
If I write /abc in the URL, it displays correctly the <NotFound> element at the top-level, without any sidebar.
However if I write /streams/abc it will render the <NotFound> next to the sidebar.
Even if I remove the catch-all <NotFound> in the nested <Routes> the top-level catch-all is not triggered because I guess the /streams/abc gets captured by the Route /streams/*.
So I want the nested routers to render their own <NotFound> element at the top-level. How is this possible with react-router-dom v6 ?
A <Navigate> that doesn't change the URL in the browser could do it, but it changes the URL.
I've seen the solution of injecting an app context but I would rather not.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I have two levels of nested
<Routes>
One at the top level with an
<Outlet>
and catch-all for a<NotFound>
element.And also multiple nested
<Routes>
corresponding to sections of the website such as/streams/*
,/admin/*
with a sidebar as a sibling and catch-all<NotFound>
element.If I write
/abc
in the URL, it displays correctly the<NotFound>
element at the top-level, without any sidebar.However if I write
/streams/abc
it will render the<NotFound>
next to the sidebar.Even if I remove the catch-all
<NotFound>
in the nested<Routes>
the top-level catch-all is not triggered because I guess the/streams/abc
gets captured by the Route/streams/*
.So I want the nested routers to render their own
<NotFound>
element at the top-level. How is this possible with react-router-dom v6 ?A
<Navigate>
that doesn't change the URL in the browser could do it, but it changes the URL.I've seen the solution of injecting an app context but I would rather not.
Thanks!
Beta Was this translation helpful? Give feedback.
All reactions