Как создать динамический подзаголовок c на основе изменения маршрута или параметров в React Router v6?

Question

В React Router v6 я пытаюсь создать динамический c SubHeader компонент, который изменяется в зависимости от конкретного маршрута или параметра маршрута. Для контекста, это искусственная настройка:

export const App = () => {
  return (
    <BrowserRouter>
      <Header>
        <TopHeader />
        <DynamicSubHeader /> // <-- here
      </Header>
      <Routes>
        <Route path="products" element={<Products />} />
        <Route path='product/:id/*' element={<ProductDetail />} >
          <Route path="price" element={<ProductDetailPrice />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

Я бы хотел обновить <DynamicSubHeader /> другим контентом при переходе между /products, /products/:id и даже /products/:id/price

Внутри <DynamicSubHeader /> я пытался использовать хук useParam , предоставленный react-router-dom, но он просто возвращает ноль или данные не сохраняются. Кажется, вы можете использовать useParam только тогда, когда он вложен в компонент <Routes>.

Я также пытался использовать хук useLocation для прослушивания изменений маршрута и установки там состояния вручную, но он также не сохраняется.

В настоящее время Я обработал <Header /> как Layout -компонент, который я поместил в каждый маршрут. Я неправильно использую React Router? В противном случае, какие-либо предложения о том, как подойти к этому?

Редактировать: исправить опечатку

Answer 1

Чтобы получить доступ к данным URL, попробуйте использовать объект match с this.props.match внутри вашего <DynamicSubHeader /> компонента.

Вот как это выглядит на примере маршрута редактирования:

isExact: true
params:
  id: "5tkd6w"
  __proto__: Object
path: "/streams/edit/:id"
url: "/streams/edit/5tkd6w"
__proto__: Object

Получив идентификатор, вы можете выполнить практически любую операцию, а, получив полный URL-адрес, сможете определить другие части содержимого подзаголовка.