Digamos que estoy usando react-router, con dos rutas /page1, /page2 Actualmente estoy en Page1.jsx, y quiero pasar a Page2.jsx, pasando algún estado.
En Page1.jsx puedo usar:
<Redirect to={{ pathname: '/page2', state: { prop1:val1, prop2:val2 } }} />En Page2.jsx, puedo recuperar el estado con:
props.location.stateMientras está en /page2, si el usuario decide presionar la actualización del navegador, entonces /page2 NO se carga como resultado de una redirección de enrutador de reacción; entonces el estado será nulo/indefinido.
¿Cuál es la forma estándar o de mejores prácticas para manejar tal escenario (en el que el usuario presiona la actualización del navegador), de modo que el estado pasado desde /page1 todavía se conserva?
Como ha descubierto, el estado de la ruta puede ser muy transitorio y, básicamente, solo existe durante la transición de la ruta y la recepción por parte del componente enrutado de destino. Querrá guardar el estado pasado en el estado local en el componente receptor y luego conservarlo en un almacenamiento a largo plazo para que pueda recuperarse después de recargar una página. LocalStorage se usa a menudo para esto.
Aquí hay un ejemplo:
const { state } = props.location; // access passed route state // or const { state } = useLocation(); // access passed route state const [localState, setLocalState] = useState( JSON.parse(localStorage.getItem("localState")) // saved value | null ); useEffect(() => { setLocalState(state); // cache route state locally }, [state]); useEffect(() => { localStorage.setItem( // persist to localStorage "localState", JSON.stringify(localState) ); }, [localState]);La forma en que elija/decida invalidar su caché (es decir, borrar el almacenamiento local) depende de usted y de sus necesidades específicas.
-La redirección no es una buena solución en su caso, la redirección no cambiará la ruta en su navegador, por lo que le sugiero que use Link en su lugar.
Ejemplo :
<Link to={{ pathname: "/courses", search: "?sort=name", hash: "#the-hash", state: { fromDashboard: true } }} />Y podría usar algo de ayuda de esta pregunta: React-Router - Link vs Redirect vs History
y para leer la documentación del enrutador: https://v5.reactrouter.com/web/api/Link