Javascript React-router - 如何在 React 中的页面之间传递数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52238637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-router - How to pass data between pages in React?
提问by Andrew
I am working on a project where I have to pass data from one page to another.
For example, I have dataon the first page.
我正在做一个项目，我必须将数据从一个页面传递到另一个页面。例如，我data在第一页上。
let data = [
{id:1, name:'Ford', color:'Red'},
{id:2, name:'Hyundai', color:'Blue'}
]
Here is the first component page where I render this list of data with the name.
这是我使用名称呈现此数据列表的第一个组件页面。
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>
);
}
}
I want to pass this data to the next page where I need this data and more data than this. I am using React Router 4. Any suggestion or help would be helpful.
我想将此数据传递到下一页，在那里我需要这些数据以及比这更多的数据。我正在使用 React Router 4。任何建议或帮助都会有所帮助。
回答by Roy Scheffers
You can use the Link component from react-router and specify to={}as an object where you specify pathname as the route to go to. Then add a variable e.g. datato hold the value you want to pass on. See the example below.
您可以使用 react-router 中的 Link 组件并指定to={}为一个对象，您可以在其中指定路径名作为要到达的路由。然后添加一个变量，例如data保存要传递的值。请参阅下面的示例。
Using the <Link />component:
使用<Link />组件：
<Link
to={{
pathname: "/page",
data: data // your data array of objects
}}
>
Using history.push()
使用 history.push()
this.props.history.push({
pathname: '/page',
data: data // your data array of objects
})
Using either of the above options you can now access dataon the location object as per the below in your page component.
使用上述任一选项，您现在可以data按照页面组件中的以下内容访问位置对象。
render() {
const { data } = this.props.location
return (
// render logic here
)
}
You can see an example of how to pass a value along with a route in another example here.
您可以在此处的另一个示例中查看如何将值与路由一起传递的示例。
More information from the React Router docs can be found below regarding:
Link compoment
history object
可以在下面找到来自 React Router 文档的更多信息：
链接组件
历史对象
State management tools.
状态管理工具。
When you are passing a lot of data/props to other components/pages. You might want to consider using a library to manage your state. Two popular ones out there are Reduxand MobX.
回答by rieckpil
You can use react-router's Linkcomponent and do the following:
您可以使用 react-router 的Link组件并执行以下操作：
<Link to={{
pathname: '/yourPage',
state: [{id: 1, name: 'Ford', color: 'red'}]
}}> Your Page </Link>
and then access the data with this.props.location.state
然后访问数据 this.props.location.state
You could also consider using redux for state management in your whole application (https://redux.js.org/).
您还可以考虑在整个应用程序 ( https://redux.js.org/) 中使用 redux 进行状态管理。
回答by Dennis Wanjiru
Assuming your other page is a component you could pass the data as a prop which will be available on the next page. Something to note though, you must use <Link />component which available in react-router 4as opposed to using <a></a>which causes a full page reload hence making access of the data lost.
假设您的另一个页面是一个组件，您可以将数据作为道具传递，该道具将在下一页上可用。不过需要注意的是，您必须使用<Link />可用的组件，react-router 4而不是使用<a></a>它会导致整页重新加载，从而导致数据访问丢失。
