通过 Link 传递数据与在 React Router 中使用 useParams、useEffect答案

【问题标题】：Passing data through Link vs using useParams, useEffect in React Router通过 Link 传递数据与在 React Router 中使用 useParams、useEffect
【发布时间】：2021-05-25 10:03:34
【问题描述】：

这方面的一个例子是带有视图链接的表格。以这种方式导航到具有表格的组件

<tbody>
  <tr>
    <td>
      <Link to={`/loan-requests/${loanRequest.id}/details`}>
        <Button size="sm" variant="outline-primary">
          View
        </Button>
      </Link>
    </td>
  </tr>
</tbody>

useParams 和 useEffect 将用于获取数据并显示

或者这样做：

<tbody>
  <tr>
    <td>
      <Link to={{path: `/loan-requests/${loanRequest.id}/details`, state={loanRequest}}}>
        <Button size="sm" variant="outline-primary">
          View
        </Button>
      </Link>
    </td>
  </tr>
</tbody>

并且在子组件中使用状态。

那么哪个更好？

【问题讨论】：

标签： javascript reactjs react-router-dom use-effect react-state-management

【解决方案1】：

我认为两种方式是等价的。对于第二种方式，“状态”是您可以通过 url 对象将数据从该组件传递到另一个页面的一种方式。参考：https://reactrouter.com/web/api/Link

【讨论】：