I am trying to figure out how to configure my React router to load two overlaying components. I have a route /user/testUser/item/1. If item:id is in the url, an overlay component opens. However, I want the underlying component /user/testUser/ to load as well. When I close my overlay, that is, when I switch from /user/testUser/item/1 to /user/testUser/, the underlying user component is loaded initially. If the /user/testUser/item/1 overlay is open, the underlying user component is not loaded.
<Switch>
<PrivateRoute
exact
path="/user/:id*"
component={ProfileView}
/>
<PrivateRoute
exact
path="*/item/:id"
component={ShowItem}
/>
</Switch>
You can not render two routes at a time. You can manage it via optional params and render that component on a particular route.
Example :
<Switch>
<PrivateRoute
exact
path="/user/testUser/item/:id?"
component={ProfileView}
/>
</Switch>
const ProfileView = () => {
const { id } = useParams();
return (
<>
{id && <ShowItem />}
...
...
<OtherComponent />
</>
)
};
You can check conditionally id and based on that render the other components you want.
You can't really do it using routes, Switch selects only one Route's component to be rendered. You could probably experiment with having two Switch'es in parallel, but it sounds like the easiest way would be to handle displaying the overlay in the underlaying component.