Best way to do dynamic layouts?
How can I get a parent layout component to dynamically render content based on what child route it is currently on?
For example, if I have nested routes like /fruit/banana and /fruit/apple, how does the parent component know to display a banana or an apple image in a shared sidebar, while the child component renders the corresponding details? The best way I can think of is to just use useLocation to get the path and use the path in a switch statement to return the right displays. Is there a better way to this? I was wondering if there was some design pattern to resolve two separate "outlets" on the same path.
1 Reply
unwilling-turquoise•2w ago
You can use
useChildMatches
it will return array of matches of the child route
If you call useChildMatches in /fruit, it will return one of those you mentioned