Можно ли как-то передавать данные с ссылкой?

Question

[Елена]

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

Возможно ли получить конкретное имя в компоненте Name, чтоб отобразить его? Например кликнула по имени "Петя", перешла по маршруту "/name" и там смогла отобразить по какому имени кликнула.

Answer 1

[Everybody_Lies]

Вы можете передавать имя в Link через параметр state, а доставать через Location
dosc: link, location

Answer 2

[n1ksON]

Можно посмотреть здесь
Либо воспользоваться searchParams

Comments

[Елена]

Спасибо)

Answer 3

[Владимир]

Архитектурно правильно, если вы для нескольких елементов используете один роут, указывать явно в URL на какой имеено айтем вы ссылаетесь

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

Comments

[Елена]

Владимир я сделала проще. Данные которые нужны в отдельном компоненте по которому ведет маршрут, их сохраняю в localstorage, а когда происходит переход, то там достаю)

[Владимир]

Елена,
Совсем не уверен в этом решении, выглядит как костыль. В примере в оф документации прекрасно описано как делать такие маршруты.

[Елена]

Владимир, так url будет меняться если делать по оф док. А мне нужен статический "/user" при разных данных

[Владимир]

Елена, Так я о том и говорю, что статический user при разных данных это плохая идея. Одна из можества причин - в истории просмотров браузера будет куча линков на user, а какого именно просматривали - непонятно.
Хороший линк /user/vasya

[Елена]

Владимир, если так, то да, согласна с вами)