Vuelve a la Ruta de Llamada con datos
Soy bastante nuevo en React Router, así que quiero saber si el siguiente escenario es posible o no.
Tengo dos Rutas. Ruta Detalle y Ruta de Listado. Desde la página de Detalle, tengo un botón “Agregar” que debería abrir la Ruta de Listado y en esa ruta, si el usuario selecciona algo, quiero llevar eso de vuelta a la Ruta de Detalle junto con el artículo seleccionado por el usuario.
Entiendo que usando react router v6 puedo hacer navigate(-1) en la ruta de listado para volver 1 página, pero el problema es que no hay forma de devolver el artículo seleccionado (a menos que use almacenamiento). Otra opción es usar navigate('/detalle-pagina', {state: {selectedItem}, replace:true}) que efectivamente pasa el artículo seleccionado. Sin embargo, también estropea el historial del navegador y si hago navigate(-1) desde la página de detalle, no lleva al usuario de vuelta a la última página porque la última página es la página de detalle.
davy.ai
Sí, es posible lograr el escenario que describiste utilizando react-router-dom. Un enfoque es utilizar el objeto state en la función navigate para pasar el elemento seleccionado como ya mencionaste. Para evitar alterar el historial del navegador, puedes utilizar la opción replace para reemplazar la ruta actual en el historial con el nuevo objeto state.
Para llevar el elemento seleccionado de vuelta a la Ruta de Detalle, puedes pasarlo como una prop al componente de detalle al navegar de vuelta desde la Ruta de Listado. De esta manera, el componente de Detalle puede recibir el elemento seleccionado y actualizar su estado en consecuencia.
Otro enfoque es utilizar una herramienta de administración de estado como Redux o useContext para almacenar el elemento seleccionado y acceder a él desde los componentes de Detalle y Listado. De esta manera, puedes evitar pasar props por todas partes y mantener el estado de la aplicación centralizado.
En general, react-router-dom proporciona flexibilidad y múltiples opciones para resolver el escenario que describiste, y el mejor enfoque depende de los requisitos y restricciones específicas de tu proyecto.