如何解决React 路由器 - 将 api 数据传递给链接的组件以打开新页面

我很难理解在这里设计路由。例如 -

array.map((each)=>(
         <Link to="details/${each.id}"> <Card props={each}/> </Link>
    ))

通过点击这些卡片，详细页面的骨架将打开，但我如何将一些与卡片相关的数据传递到新页面？我想将一些api数据发送到与每张卡片相关的新页面，或者在切换到该新组件页面后传递一些信息以调用与该卡片相关的api。

解决方法

您可以使用位置状态或搜索（或查询参数）通过Link传递数据：

<Link
  to={{
    pathname: '/path/to/my/component',search: 'id=123&name=foo',state: { data: 111 },}}
>
  Click Me
</Link>

并在 MyComponent 中检索（例如使用钩子）：

const location = useLocation()
const query = new URLSearchParams(location.search)

console.log(location.state)
console.log(query.get('id'))
console.log(query.get('name'))

PS：您还可以制作自定义钩子 - useQuery 用于查询参数。

但请注意，如果您直接在浏览器中通过手动输入打开路径 - /path/to/my/component，则不会有位置状态或查询参数。

Internet Explorer 不支持 URLSearchParams，如果您还需要支持 IE，可以使用 query-string 之类的包。

通过路由转换发送数据

您可以使用 Link 的 to object 随路由转换一起发送状态。

至：对象

可以具有以下任何属性的对象：

pathname：一个字符串，表示要链接到的路径。
搜索：查询参数的字符串表示。
hash：放入 URL 的哈希值，例如#a-hash。
state：坚持到该位置的状态。

array.map((each)=>(
  <Link
    to={{
      pathname: `details/${each.id}`,state: {
        // whatever you need to send with the route transition
      },}}
  >
    <Card props={each}/>
  </Link>
))

接收路由状态

你有几个选择。

现在在函数式组件中使用 useLocation React 钩子的最简单、更常用的方法。
```
const { state } = useLocation();
```
使用 withRouter 高阶组件装饰组件并注入 route props。

如果你的组件用 withRouter 装饰，它会将当前路由的 props 作为 props 注入。
```
 export default withRouter(EachComponent);
```
从 state 属性访问 location。
```
 const { state } = this.props.location;
```
由 Route 组件直接渲染并接收 route props。

如果您的组件直接由 Route 渲染，它会将路由道具传递给它。
```
 <Route path="/details/:id" component={EachComponent} />
```
从 state 属性访问 location。
```
 const { state } = this.props.location;
```

注意： 路由状态是暂时的，这意味着它只存在于从一个路由到下一个路由的转换过程中。如果您直接导航到接收路由，它将没有状态，因为它没有使用提供状态的路由的转换。