如何使用 React 路由器 dom V6 隐藏所有嵌套路由中的组件？答案

【问题标题】：How to hide a component in all nested routes with React router dom V6?如何使用 React 路由器 dom V6 隐藏所有嵌套路由中的组件？
【发布时间】：2022-01-09 18:55:58
【问题描述】：

我想根据 react-router-dom v6 的路由隐藏一个组件。我可以用确切的路径制作它，但我也想将它隐藏在嵌套路线中。我试过这样：

{location !== "/dashboard/*" && <Header />}

但它只适用于页面http://localhost:3000/dashboard/*，这不是我想要的。我该如何解决这个问题？

这是完整的代码：

const location = useLocation().pathname
const conditionLocation = location === "/dashboard" || location === "/dashboard/*"

return !conditionLocation && <Header />

路线：

// Packages
import React from "react"
import { Routes, Route } from "react-router-dom"

// User
import Dashboard from "../pages/admin/Dashboard"
import EditAccount from "../pages/admin/EditAccount"

function Switch() {
    return (
        <Routes>
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/dashboard/edit" element={<EditAccount />} />
        </Routes>
    )
}

export default Switch

感谢您的帮助！

【问题讨论】：

您要隐藏或有条件地渲染什么？ Header 组件？您接受的答案可能有效....但我确信有一种更简单、更直接的方法。

标签： reactjs react-router-dom

【解决方案1】：

使用 javascript 正则表达式修复此问题：-

{!(location.match(/^\/dashboard.*$/gim)) && <Header />}

希望有效..

【讨论】：

成功了，非常感谢！

【解决方案2】：

据我了解，您希望仅在特定路线上呈现Header 组件。您没有分享太多上下文，但我知道您不希望在任何 "/dashboard" 路径上呈现 Header。您可以通过布局和Outlet 组件来实现这一点。

const HeaderLayout = () => (
  <>
    <Header />
    <Outlet /> // <-- wrapped Route components render into outlet
  </>
);

对于您要使用Header 组件渲染的路由，将它们渲染为渲染HeaderLayout 的路由。

<Routes>
  <Route element={<HeaderLayout />}>
    ..... routes render into outlet with header
  </Route>
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/dashboard/edit" element={<EditAccount />} />
</Routes>

【讨论】：