Puede usar el componente Link de react-router y especificar to={} como un objeto donde especifica el nombre de ruta como la ruta a la que ir. Luego agregue una variable, por ejemplo, data para mantener el valor que desea transmitir. Vea el ejemplo a continuación.

Usando el componente <Link /> :

 <Link to={{ pathname: "/page", state: data // your data array of objects }} >

Usando history.push()

 this.props.history.push({ pathname: '/page', state: data // your data array of objects })

Usando cualquiera de las opciones anteriores, ahora puede acceder a los data en el objeto de ubicación como se muestra a continuación en el componente de su página.

 render() { const { state } = this.props.location return ( // render logic here ) }

Puede ver un ejemplo de cómo pasar un valor junto con una ruta en otro ejemplo aquí .

La mejor manera de pasar datos al Componente de destino , simplemente copie y pegue el código y vea la magia, también lo expliqué en profundidad.

Recuerda: en react-router-dom v6 puedes usar ganchos en su lugar.

versión 5.X

Supongamos que tenemos dos Componentes primero y segundo. El primero tiene el enlace que apuntará al segundo componente.

El primer Componente donde está el enlace, al hacer clic en el enlace irá a la ruta de destino como en mi caso es: "/details" .

 import React from 'react'; import {Link} from 'react-router-dom'; export default function firstComponent() { return( <> <Link to={{ pathname: '/details', state: {id: 1, name: 'sabaoon', shirt: 'green'} }} >Learn More</Link> </> ) }

Ahora, en el segundo Componente , puede acceder al objeto pasado como:

 import React from 'react' export default class Detials extends React.Component{ constructor(props){ super(props); this.state={ value:this.props.location.state, } } alertMessage(){ console.log(this.props.location.state.id); } render(){ return ( <> {/* the below is the id we are accessing */} hay! I am detail no {this.props.location.state.id} and my name is {this.props.location.state.name} <br/> <br/> {/* press me to see the log in your browser console */} <button onClick={()=>{this.alertMessage()}}>click me to see log</button> </> ) } }

nota : en la versión 6 de react-router-dom, el método anterior no funcionará en los componentes de clase, aunque puede usar componentes funcionales de reaccionar usando useLocation hook y luego puede dibujar el objeto de estado a través de esa ubicación en otro componente.

versión 6

Cómo lograr lo mismo usando ganchos v6 de react-router-dom

Supongamos que tenemos dos componentes funcionales, primero el componente A, segundo el componente B. El componente A quiere compartir datos con el componente B.

uso de ganchos: (useLocation,useNavigate)

 import {Link, useNavigate} from 'react-router-dom'; function ComponentA(props) { const navigate = useNavigate(); const toComponentB=()=>{ navigate('/componentB',{state:{id:1,name:'sabaoon'}}); } return ( <> <div> <a onClick={()=>{toComponentB()}}>Component B<a/></div> </> ); } export default ComponentA;

Ahora obtendremos los datos en el Componente B.

 import {useLocation} from 'react-router-dom'; function ComponentB() { const location = useLocation(); return ( <> <div>{location.state.name}</div> </> ) } export default ComponentB;

Puede usar el componente Link de react-router y hacer lo siguiente:

 <Link to={{ pathname: '/yourPage', state: [{id: 1, name: 'Ford', color: 'red'}] }}> Your Page </Link>

y luego acceda a los datos con this.props.location.state

También podría considerar usar redux para la gestión del estado en toda su aplicación ( https://redux.js.org/ ).