Блог

Я использую react-router и Link просто отлично, как показано ниже:

   <nav>
    ...
    {sidebarCollections.map((c, i) => (
      <Link to={`/collection?id=${c.id}`} key={c.id}>
        {c.name}
      </Link>
    ))}
  </nav>
  

Но теперь мне нужно передать некоторые данные через Link .

Я узнал в документах React Router, которые Link могут в качестве альтернативы использовать объект с полем состояния, что как раз то, что мне нужно. Пример из документов:

 <Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>
  

Поэтому я пытаюсь:

  <nav>
    ...
    {sidebarCollections.map((c, i) => (
     <Link
        to={{
          pathname: `/collection?id=${c.id}`,
          // state: { name: "test"}
        }}
        key={c.id}
      >
        {c.name}
      </Link>
    ))}
 </nav>

  
  

Итак, я попробовал выше, и, неожиданно, это не рендеринг. Я пытался комментировать state и использовать только pathname поле для соответствия строковой форме, с которой я работал раньше, но тоже безрезультатно.

Что происходит и как я могу передать некоторые данные по ссылке в мой компонент? Это из-за функции map или интерполяции строк, которая, возможно, каким-то образом ее портит?

Спасибо

Параметры запроса не могут быть добавлены внутри pathname поля при использовании синтаксиса объекта. Его необходимо включить в качестве search поля. В итоге я выбрал это в качестве решения:

    <Link
        to={{
          pathname: `/collection`,
          search: `?id=${c.id}`,
          state: { name: c.name },
        }}
        key={i}
      >
        {sc.name}
   </Link>
  

И затем в моем компоненте я могу получить доступ к состоянию с помощью:

 location.state.name