在某些路径上渲染组件仅反应路由器 v6答案

【问题标题】：Render component on certain paths only react router v6在某些路径上渲染组件仅反应路由器 v6
【发布时间】：2022-08-02 23:40:25
【问题描述】：

如何仅在主页和版本页面上呈现面包屑标题组件？我不希望它显示在未找到的页面上。我正在使用带有插座的外部路由，因为我需要访问面包屑标题中的 useLocation 挂钩，这是实现此目的的唯一方法。

<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>

标签： reactjs routes react-router

【解决方案1】：

您可以使用另一个布局组件来包装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>

【讨论】：

好吧，为什么我自己就想不出这个，呵呵。有人给这个人加薪！总是来救援。

【解决方案2】：

2种方式：

useLocation 并比较 BreadCrumb 组件上的 location.path，例如 =>

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

如果您只有 2 或 3 条路线，那没关系，如果您想要更多……

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

<路由路径="/" 元素={}> <Route path="/version/:id" element={} /> // 其他带有 breadC 的路由

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

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

// Edit So in fact, nesting routes is a route with subRoutes, for example : /user is routes /user/profil is subRoutes

因此，为此，您使用采用 path='/user' 的 Route 组件并渲染一个类似于容器的组件，其中每个 subRoutes 的组件都相似。这条路线的孩子，你把新的组件路线，与子页面。

在你的情况下

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

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

更好的？

【讨论】：

请您进一步解释第二种方法吗？不确定我是否理解。为了清楚起见，我希望将面包屑标题显示在主页和版本路径上，而不是在基本上是任何其他路径的未找到页面上。而且我仍然想用插座作为父路由来渲染它，因为我需要访问 Breadcrumbheader 中的 useLocation。
是的，我现在明白了。谢谢你，朋友。

【解决方案3】：

对于 react-router 6，您可以使用 <Outlet /> 标签

More info

【讨论】：