时间戳

首页 > 解决方案 > 如何在 React Router v6 中根据路由更改或参数创建动态子标题？

reactjs - 如何在 React Router v6 中根据路由更改或参数创建动态子标题？

问题描述

在 React Router v6 中，我正在尝试创建一个动态的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，但它只是返回 null 或数据不持久。似乎你只能在嵌套在组件内时使用useParam 。<Routes>

我也尝试使用useLocation挂钩来监听路由更改并在那里手动设置状态，但它也不会持续存在。

目前，我已将其视为放置在每条路线中<Header />的Layout组件。我用错了 React Router 吗？否则，有关如何解决此问题的任何建议？

标签： reactjsreact-router

解决方案

要访问您的 URL 数据，请尝试使用组件内部的match对象。this.props.match<DynamicSubHeader />

这是它在示例编辑路线上的外观：

//$> console.log(this.props.match)
{
  isExact: true
  params:
    id: "5tkd6w"
    __proto__: Object
  path: "/streams/edit/:id"
  url: "/streams/edit/5tkd6w"
  __proto__: Object
}

获得 id 后，您几乎可以执行任何操作，并且通过获取完整的 URL，您可以确定子标题内容的其他部分。

推荐阅读