lost mauve
Hello all!
I am trying to hide my routes instead of unmounting them. I am failing miserably doing so... and then I realized everything I could find on the web was related to v4 or v5 of react-router-dom. I see in v6 the render and children prop were removed (or changed). So my question is, how do I hide a route instead of unmounting it? Thank you!
elfin igloo
Can you elaborate what you are trying to achieve?
lost mauve
I have a nav-menu across the top of the site. Kind like "tabs" for the single page web app. I need to have each page "hide" instead of unmount when I select a different "tab".
In short: I need to hide routes with display: none instead of unmounting them... and I have no idea how do to this in v6
spring yoke
here's one way. instead of using routes and element to decide what to show on each page, use a tabs component on all the pages and keep it in sync with the route
https://reach.tech/tabs/
<Tabs> takes an index prop, so you can use the current path to pick the index and then pass that in
const paths = [
'/abc',
'/def',
'/ghi',
]
function MyPage() {
const { pathname } = useLocation()
const index = paths.indexOf(pathname)
return <Tabs index={index}>...</Tabs>
}
and then use <MyPage /> as the element for all the routes in question
so in the end this is not a question of hiding the route rather than unmounting — you can't do that — but rather taking the stuff you want to hide out of the routing logic
spring yoke
@lost mauve