0
560
Vistasreact-router-dom cómo navegar hacia atrás (no en el historial)
Tengo algunas rutas anidadas y necesito navegar hacia atrás "un nivel más arriba", por así decirlo.
estoy usando react-router-dom v5.3.1
history.goBack() me llevará a la última página visitada, como si usara el botón Atrás en el navegador. No necesito esto.
Imagina que mi historial se parece a esto...:
[ dashboard/1/sub-page/7 dashboard/1/sub-page/13 dashboard/1/sub-page/9 dashboard/1/sub-page/1 ] La URL de mi navegador es: localhost:8080&app.html#/dashboard/1/sub-page/7
¿ react-router-dom proporciona una forma segura de navegar a: localhost:8080&app.html#/dashboard/1 - o cuál sería un enfoque decente aquí?
3 Respuestas
Responde la pregunta0
El objeto de history solo puede navegar a rutas definidas específicamente a través de una cadena de ruta con .push / .replace , o navegar hacia adelante/atrás a través de un delta con .go .
Puede crear un controlador "goToParent" que lea el nombre de pathname de la ubicación coincidente actual y corte el último segmento de ruta y emita un PUSH.
Ejemplo:
import { useLocation, useHistory } from "react-router-dom"; ... const { pathname } = useLocation(); const history = useHistory(); const goUpLevel = () => { const parent = pathname.split("/").slice(0, -1).join("/"); history.push(parent); } 
Si desea subir dos niveles, es decir, desde "/dashboard/1/sub-page/7" hasta "/dashboard/1" , use .slice(0, -2) para cortar los dos últimos segmentos.
0
Puedes usar "." o ".." en su componente Link para subir uno o dos niveles.
<Link to=".">Go one level up</Link> <Link to="..">Go two levels up</Link>Otro enfoque es mapear rutas en ayudantes para que pueda reutilizarlos a lo largo de la base de código:
// Routes helpers const dashboardRoute = (id) => `/dashboard/${id}`; const subPageRoute = (id, subId) => `/dashboard/${id}/sub-page/${subId}`; // Routes mapping <Switch> <Route path={dashboardRoute(":id")}> <Dashboard /> </Route> <Route path={subPageRoute(":id", ":subId")}> <SubPage/> </Route> </Switch> // Route helper usage <Link to={dashboardRoute(id)} >Go to dashboard route</Link>