Блог

Главная - Вопросы по программированию - React-Маршрутизатор v6 | Получение местоположения шаблона

React-Маршрутизатор v6 | Получение местоположения шаблона

#reactjs #react-router #react-router-dom

#реагирует на #реагировать-маршрутизатор #реагировать-маршрутизатор-дом

Вопрос:

Я использую маршрутизатор React v6, и у меня есть эти маршруты (только для этого вопроса):

 return (  lt;BrowserRoutergt;  lt;Routesgt;  lt;Route path="/" element={lt;HomePage /gt;} /gt;  lt;Route path="about" element={lt;AboutPage /gt;} /gt;  lt;Route path="items" element={lt;AllItemsPage /gt;} /gt;  lt;Route path="items/:id" element={lt;ItemPage /gt;} /gt;  lt;Route path="*" element={lt;NotFoundPage /gt;} /gt;  lt;/Routesgt;  lt;/BrowserRoutergt; );

Теперь я хочу получить путь к шаблону items/:id внутри lt;ItemPage /gt; компонента.

В настоящее время, когда я использую useLocation() hook, я получаю путь, items/2 например, и мне нужны оба — шаблон и путь.

Версии

  • Реагировать: ^17.0.2
  • Реагировать на DOM маршрутизатора: ^6.0.2

Комментарии:

1. Когда вы говорите «шаблон», вы имеете в виду шаблон? RRDv6, похоже, не предоставляет шаблоны маршрутов для дочерних компонентов. В чем здесь польза, для чего вы пытаетесь решить? Вы пытаетесь построить вложенные ссылки/маршруты, такие как useRoutedMatch крюк, который использовался в v5 со свойствами path и url ?

Ответ №1:

Просматривая документы API React router v6, AFAIK не видит способа получить шаблон напрямую.

Вашим лучшим выбором было бы передать реквизит вашим компонентам, таким как

 lt;Route path="items/:id" element={lt;ItemPage pattern="items/:id"/gt;} /gt;

Лучше хранить ваши шаблоны в объекте

 const paths = {  home: "/",  ...  items: "items/:id" } ... lt;Route path={paths.items} element={lt;ItemPage pattern={paths.items}/gt;} /gt;
Метки: