Entonces, digamos que tengo una página de perfil que representa diferentes componentes según la ruta. Por ejemplo:
/profile/posts representa el componente Publicaciones dentro del Perfil.
/profile/comments representa el componente Comentarios dentro del Perfil.
Normalmente, primero renderizo la página de perfil para la ruta "/profile" y luego, dentro de ella, renderizo el componente relevante de acuerdo con las rutas mencionadas anteriormente. Lo que me gustaría hacer es omitir la parte "/profile" de las rutas definidas en los componentes de ruta dentro del perfil y solo mantener la parte restante. ¿Cómo se puede hacer eso sin romper el enrutamiento?
Vea los comentarios en el código a continuación:
// App.js // ... <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/profile"> // Profile page is rendered here <Profile /> </Route> </Switch> // ... // Profile.js // ... <Switch> <Route exact path="/profile/posts"> // I want to omit "/profile" part of the path. <Posts /> </Route> <Route path="/profile/comments"> // I want to omit "/profile" part of the path. <Comments /> </Route> </Switch> // ...Al anidar rutas, si no desea "duplicar" los detalles de la ruta, puede obtenerlos del objeto de coincidencia , específicamente el valor de la path para construir rutas anidadas.
Suponiendo que Profile es un componente de función, use el enlace useRouteMatch para acceder al valor de path de la ruta coincidente actualmente. Si es un componente de clase, tendrá que acceder a los accesorios de ruta para obtener this.props.match .
// Profile.js const { path } = useRouteMatch(); // ... <Switch> <Route path={`${path}/posts`}> <Posts /> </Route> <Route path={`${path}/comments`}> <Comments /> </Route> </Switch> // ...Aquí hay una demostración de enrutamiento anidado más detallada de `react-router-dom.