Is it possible to somehow pass data with a link?

Question

React

const arrName = [{name: 'Вася'}, {name: 'Петя'}, {name: 'Коля'}];
<Routes>
   <Route path='/name' element={<Name />} />
</Routes>
arrName.map((el) => {
  return <Link to='/name'  >{el.name}</Link>
})

Is it possible to get a specific name in the Name component in order to display it? For example, she clicked on the name "Petya", followed the route "/name" and there she was able to display which name she clicked on.

Answer 1

You can pass a name to Link via the state parameter, and get it via Location
dosc: link , location

Answer 2

You can look here
Or use searchParams

Answer 3

It is architecturally correct, if you use one route for several elements, indicate explicitly in the URL which item you are referring to

<Route path="invoices" element={<Invoices />}>
      <Route path=":invoiceId" element={<Invoice />} />
    </Route>

<Link
            style={{ display: "block", margin: "1rem 0" }}
            to={`/invoices/${invoice.number}`}
            key={invoice.number}
          >
            {invoice.name}
          </Link>

import { useParams } from "react-router-dom";

export default function Invoice() {
  let params = useParams();
  return <h2>Invoice: {params.invoiceId}</h2>;
}

https://reactrouter.com/docs/en/v6/getting-started...