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

Question

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

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

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

Answer 1

通过路由转换发送数据

Link您可以使用 a的to object来发送状态以及路由转换。

反对

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

• 路径名：表示链接路径的字符串。
• 搜索：查询参数的字符串表示形式。
• 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>
))

接收路由状态

你有几个选择。

1. 现在最简单、更常见的方法是在功能组件中使用useLocation React hook。

   const { state } = useLocation();
   

2. 使用withRouter高阶组件装饰组件并注入路由 props。

   如果您的组件用withRouter它装饰，则会将当前的路由道具作为道具注入。

    export default withRouter(EachComponent);
   

   state从道具访问location。

    const { state } = this.props.location;
   

3. 直接由Route组件渲染并接收路由 props。

   如果您的组件直接由 a 渲染，Route它将传递给它的路线道具。

    <Route path="/details/:id" component={EachComponent} />
   

   state从道具访问location。

    const { state } = this.props.location;
   

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