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

Question

我正在做一个项目，我必须将数据从一个页面传递到另一个页面。例如，我在第一页上有 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 Router 4。任何建议或帮助都会有所帮助。

Answer 1

您可以使用 react-router 中的 Link 组件并指定 to={}作为一个对象，您将路径名指定为要到达的路径。然后添加一个变量，例如data持有你想要传递的值(value)。请参见下面的示例。

使用 <Link />组件:

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

使用 history.push()

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

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

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

您可以在另一个示例中看到如何将值与路由一起传递的示例 here .