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
)
}
在此处的另一个示例中，您可以看到一个如何将值与路由一起传递的示例。
可以在以下有关以下内容的地方找到来自React Router文档的更多信息：
链接组件
历史对象
当您将大量数据/属性传递给其他组件/页面时。您可能要考虑使用库来管理状态。Redux和MobX是最受欢迎的两个。
以上是 React-router-如何在React中的页面之间传递数据？ 的全部内容， 来源链接： utcz.com/qa/422016.html
