Podríamos navegar a una ruta diferente usando
this.props.router.push('/some/path')
¿Hay alguna forma de enviar parámetros (objeto) durante la navegación?
Hay otras opciones que se me ocurren, pero me pregunto si es posible pasar object .
Podría incrustar la identificación del objeto y recuperar el objeto del servidor desde la nueva página.
O podría almacenar el objeto en un almacenamiento global como redux store. (Este objeto necesita ser retirado de la tienda pronto. Así que estoy pensando que podría no ser bueno ponerlo ahí en primer lugar)
Las respuestas actuales están desactualizadas.
Enrutador de reacción 6 :
Utilice el useNavigate :
const navigate = useNavigate(); navigate('/other-page', { state: { id: 7, color: 'green' } }); Luego, puede acceder a los datos de estado en '/otra página' a través del useLocation :
const {state} = useLocation(); const { id, color } = state; // Read values passed on stateReaccionar enrutador 4 o 5 :
Llame a history.push y pase un objeto como segundo parámetro para pasar el estado:
props.history.push('/other-page', { id: 7, color: 'green' }))Luego, puede acceder a los datos de estado en '/otra página' a través de:
props.location.state
React Router usa objetos de location . Una de las propiedades de un objeto de location es state .
this.props.router.push({ pathname: '/other-page', state: { id: 7, color: 'green' } }) En la página a la que se navega, la location actual se inyectará en el componente cuya ruta coincidió, por lo que puede acceder al estado usando this.props.location.state .
Una cosa a tener en cuenta es que no habrá state si un usuario navega directamente a la página, por lo que aún necesitará algún mecanismo para cargar los datos cuando no exista.
Para el componente funcional y react-router-dom:^5.2.0 , tomemos un ejemplo muy simple para precisar el concepto
import { useHistory } from "react-router-dom"; function Sender(){ const history = useHistory(); const goToReceiver = () => { history.push("/receiver", { name:'Mr',age:23 }); } return <button onClick={goToReceiver}>Go To Receiver</button> } Ahora veamos cómo llegaron los datos a la receiver route
import { useLocation } from "react-router-dom"; function Receiver(){ const location = useLocation(); return <div> <p>{location.state.name}</p> <p>{location.state.age}</p> </div> }