React router - 将 api 数据传递给链接组件以打开新页面

Question

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

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

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

Answer 1

您可以使用 location state 或 search（或查询参数）通过 Link 传递数据：

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

并在 MyComponent 中检索（e.g.using 钩子）：

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，将不会有位置状态或查询参数。

和URLSearchParams is not supported in Internet Explorer, if you need to support IE as well, you can use some package like query-string.

Answer 2

使用路由转换发送数据

您可以使用 Link 的 to object.

随路由转换发送状态

to: object

An object that can have any of the following properties:

pathname: A string representing the path to link to.

search: A string representation of query parameters.

hash: A hash to put in the URL, e.g. #a-hash.

state: State to persist to the location. <-- you need this

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 Higher Order Component and inject route props.
装饰组件
如果您的组件装饰有 withRouter，它将把当前路由道具作为道具注入。
```
 export default withRouter(EachComponent);
```
从 location 属性访问 state。
```
 const { state } = this.props.location;
```
直接由Route组件渲染并接收route props.

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

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

React router - 将 api 数据传递给链接组件以打开新页面

React router - pass api data to the linked component to open with a new page

reactjs

react-router

react-router-v4

react-router-dom

使用路由转换发送数据

接收路由状态