javascript - React-router-如何在React中的页面之间传递数据？

我正在一个项目中，我必须将数据从一页传递到另一页。
例如，我在第一页上有data。

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

这是我用名称呈现此数据列表的第一个组件页面。

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>
    );
  }
}

我想将此数据传递到下一个页面，在该页面上我需要该数据以及比此更多的数据。我正在使用React Router4。任何建议或帮助都会有所帮助。

最佳答案

您可以使用react-router中的Link组件，并指定to={}作为对象，并在其中指定路径名作为要到达的路由。然后添加一个变量，例如data保存要传递的值。请参见下面的示例。
使用<Link />组件:

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

使用history.push()

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

使用以上任一选项，您现在都可以按照页面组件中的以下内容访问位置对象上的data。

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

您可以在另一个示例here中看到一个如何将值与路由一起传递的示例。
以下是有关React Router文档的更多信息:
Link component
history object
状态管理工具。
当您将大量数据/属性传递给其他组件/页面时。您可能要考虑使用库来管理状态。外面有两个受欢迎的类型是Redux和MobX。