Как я могу создать ссылку на «соседний» ресурс в реагирующем маршрутизаторе v6?

У меня есть приложение React, использующее React Router v6. У меня есть маршрут, соответствующий пути с несколькими параметрами пути, примерно так:

/event/:eventId/resource/:resourceId

Они представлены вложенными маршрутами, например:

<Route path="/event/:eventId/*" element={<Event />}>
  <Route path="resource/:resourceId" element={<Resource />} />
</Route>

У меня есть несколько событий и несколько ресурсов. Один ресурс может появиться в контексте нескольких событий, соответствующих таким URL-адресам:

  • /event/event-1/resource/resource-1
  • /event/event-2/resource/resource-1

Отдельные ресурсы связаны с другими ресурсами. Я хочу иметь возможность делать ссылки на странице ресурса на другие связанные ресурсы в контексте того же события.

Итак, на странице:

/event/event-1/resource/resource-1,

который отображает мой компонент Resource, и, учитывая, что resource-1 имеет ссылки на resource-2 и resource-3, я мог бы сделать ссылки на эти URL-адреса:

  • /event/event-1/resource/resource-2
  • /event/event-1/resource/resource-3

Но я не хочу жестко кодировать пути для этих ссылок в моем компоненте Resource, если я могу этого избежать.

React Router 6 позволяет мне создавать вложенные маршруты и ссылки, поэтому я могу создавать длинные ссылки, не зная полного пути до этой точки. Предоставляет ли он хороший способ сделать эти ссылки без жесткого кодирования полного пути?

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
0
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете воспользоваться преимуществами generatePath и/или написать собственные вспомогательные функции:

import { generatePath } from 'react-router-dom';

export function getResourcePath({ eventId, resourceId }) {
  return generatePath('/event/:eventId/resource/:resourceId', { eventId, resourceId });
}

В ваших компонентах:

import { getResourcePath } from '...';

...

<Link to={getResourcePath(...)}/>

Другие вопросы по теме