使用 Link 向 React Router 传递数据

如果您在许多项目中使用过React Router ，那么您肯定会问如何通过链接标签将一些数据或状态传递给其他组件？。

因此，首先我们将讨论如何在 React 中的组件之间传递数据。

1. 传递 props

第一种是将一些 props 从父组件传递给子组件

2. 全局状态

第二个方法是创建一个全局状态并使许多组件可以访问一些数据。

您可以使用两种主要途径管理全局状态：

• Redux
• 反应上下文

3. 使用 React Router 的 Link

第三个基本上是当您单击一个链接（到组件）时，您会通过该链接传递数据。

下面我们有一个简单的 React 应用程序和一些路线

这里有两条路线：“ /”（主页）路线和“ /profile”（个人资料）路线。

因此，我们运行后看到的第一个页面yarn start是主页

如果我们转到/profile路由，
我们将看到Profile组件

因此，正如您所看到的，我们使用<Link>而不是常规<a>标签来防止页面刷新。

那么我们如何从Home组件向Profile组件发送数据呢？

所以很酷的事情是，我们可以将一个对象传递给中的to<Link>属性，并且该对象必须包含一个pathname和可选的一个state，并且我们可以通过该状态传递数据

我们可以在Profile组件中访问该状态props.location.state

更多信息请查看此React Router 链接