Estoy trabajando en un proyecto donde tengo que pasar datos de una página a otra. Por ejemplo, tengo data en la primera página.

let data = [
  {id:1, name:'Ford', color:'Red'},
  {id:2, name:'Hyundai', color:'Blue'}
]

Aquí está la primera página del componente donde renderizo esta lista de datos con el nombre.

class ListDetail extends Component {
    constructor();
    handleClick(data){
    console.log(data);
  }
  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <ul>
          {data.map((data,i) => {
            return <li onClick={this.handleClick.bind(this,data)}>{data.name}</li>
          })}
        </ul>
      </div>
    );
  }
}

Quiero pasar estos datos a la página siguiente donde necesito estos datos y más datos que este. Estoy usando React Router 4. Cualquier sugerencia o ayuda sería útil.

18
Andrew 8 sep. 2018 a las 22:21

3 respuestas

La mejor respuesta

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

Usando el componente <Link />:

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

Usando history.push()

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

Con cualquiera de las opciones anteriores, ahora puede acceder a data en el objeto de ubicación según lo siguiente en el componente de su página.

render() {
  const { data } = 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í.

Puede encontrar más información de los documentos de React Router a continuación con respecto a:
Compuesto de enlace
objeto de historia

Herramientas de administración de estado.

Cuando pasa muchos datos / accesorios a otros componentes / páginas. Es posible que desee considerar el uso de una biblioteca para administrar su estado. Dos populares son Redux y MobX.

25
Roy Scheffers 9 sep. 2018 a las 07:49

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 acceder a los datos con this.props.location.state

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

6
rieckpil 8 sep. 2018 a las 19:33

Suponiendo que su otra página es un componente, podría pasar los datos como un accesorio que estará disponible en la página siguiente. Sin embargo, hay que tener en cuenta que debe usar el componente <Link /> que está disponible en react-router 4 en lugar de usar <a></a> que provoca una recarga completa de la página, lo que hace que el acceso a los datos se pierda.

0
Dennis Wanjiru 8 sep. 2018 a las 19:34