Estoy tratando de averiguar cómo configurar mi enrutador React para cargar dos componentes superpuestos. Tengo una ruta /user/testUser/item/1 . Si item:id está en la URL, se abre un componente superpuesto. Sin embargo, quiero que el componente subyacente /user/testUser/ también se cargue. Cuando cierro mi superposición, es decir, cuando cambio de /user/testUser/item/1 a /user/testUser/ , el componente de usuario subyacente se carga inicialmente. Si la /user/testUser/item/1 está abierta, el componente de usuario subyacente no se carga.
<Switch> <PrivateRoute exact path="/user/:id*" component={ProfileView} /> <PrivateRoute exact path="*/item/:id" component={ShowItem} /> </Switch>No puede renderizar dos rutas a la vez. Puede administrarlo a través de parámetros opcionales y renderizar ese componente en una ruta particular.
Ejemplo :
<Switch> <PrivateRoute exact path="/user/testUser/item/:id?" component={ProfileView} /> </Switch> const ProfileView = () => { const { id } = useParams(); return ( <> {id && <ShowItem />} ... ... <OtherComponent /> </> ) }; Puede verificar la id condicional y, en función de eso, renderizar los otros componentes que desee.
Realmente no puede hacerlo usando rutas, Switch selecciona solo un componente de ruta para renderizar. Probablemente podría experimentar con dos Switch'es en paralelo, pero parece que la forma más fácil sería manejar la visualización de la superposición en el componente subyacente.