Passing data through Link vs using useParams, useEffect in React Router

Viewed 659

An example of this is a table with a view Link. The component which has the table is either navigated to in this manner

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

and useParams and useEffect will be used to fetch the data and display

or it's done this way:

<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>

and the state is used in the child component.

So which is better?

1 Answers

I think two ways are equivalent. For the second ways, ‘state’ is one way you can pass data from this component to to another page via url object. refer: https://reactrouter.com/web/api/Link

Related