How can I use Link with a component and dynamic endpoint

Question

How can I use Link with a component and dynamic endpoint, Would I be better using Router for this particular use case and if so, how would I implement it?

{rentals.map((rental, id) => (
          <Link key={id} href={`/rentals/${rental.id}`}>
            <RentalCard rental={rental} />
          </Link>
        ))}

Answer 1

Wrap the RentalCard Component in an empty A tag like so;

{rentals.map((rental, id) => (
            <Link key={id} href={`/rentals/${rental.id}`}>
              <a>
                <RentalCard rental={rental} />
              </a>
            </Link>
          ))}