某些路径上的渲染组件仅对路由器 v6 做出反应

Question

如何只在首页和版本页渲染面包屑header组件？我不希望它显示在未找到的页面上。我正在使用带出口的外部路由，因为我需要访问面包屑中的 useLocation 挂钩 header，这是实现该目的的唯一方法。

<div className="App">
      <Routes>
        <Route
          element={
            <>
              <Header />
              <BreadcrumbHeader />
              <Outlet />
            </>
          }
        >
          <Route path="/" element={<HomePage />} />
          <Route path="/version/:Id" element={<VersionPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Route>
      </Routes>
    </div>

Answer 1

2 种方式：

useLocation 并比较 BreadCrumb 组件上的 location.path，类似于 =>

常量位置 = useLocation() 使成为（ <> {location.path === 'toto' && } )

如果您只有 2 条或 3 条路线，那“没问题”，如果您想要更多...

嵌套路由！！更好的做法=>

<路由路径="/" 元素={}> <路由路径="/version/:id" element={} /> // 使用 breadC 的其他路由

你创建了一个组件ContainerWithBreath，你把组件BreadC放在这里，不要忘记使用（看文档，就像说“把嵌套组件放在这里”）。

有关更多说明，请参阅文档部分“嵌套路线”

// 编辑所以其实嵌套路由就是一个带有子路由的路由，例如： /user 是路由 /user/profil 是子路由

因此，为此，您使用采用 path='/user' 的 Route 组件，并呈现一个类似容器的组件，您的组件对于每个子路由都相似。 Children这个路由，你把新的组件路由，与子页面。

你的情况

<Route path="/" element={<ContainerWithB />} >
<Route path="/version/:Id" element={<VersionPage />} />
<Route index element={<Home />} />
</Route>

第一行渲染容器（需要放置在ContainerWithB的渲染器上才能显示嵌套的路由元素。第二行你的 VersionPage 第三行您的主页为“/”

更好？

Answer 2

您可以使用另一个布局组件来包装 HomePage 和 VersionPage 组件，以便使用 BreadcrumbHeader.

呈现它们

<div className="App">
  <Routes>
    <Route
      element={(
        <>
          <Header />
          <Outlet />
        </>
      )}
    >
      <Route
        element={(
          <>
            <BreadcrumbHeader />
            <Outlet />
          </>
        )}
      >
        <Route path="/" element={<HomePage />} />
        <Route path="/version/:Id" element={<VersionPage />} />
      </Route>
      <Route path="*" element={<NotFoundPage />} />
    </Route>
  </Routes>
</div>

某些路径上的渲染组件仅对路由器 v6 做出反应

Render component on certain paths only react router v6

routes

reactjs

react-router