如何使用 React router dom V6 在所有嵌套路由中隐藏组件？

Question

我想使用 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

感谢您的帮助！

Answer 1

使用 javascript 正则表达式解决此问题：-

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

希望有用..

Answer 2

据我了解，您只想在特定路线上渲染 Header 组件。您没有分享太多上下文，但我了解您不想想要在任何 [=14= 上呈现 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>

如何使用 React router dom V6 在所有嵌套路由中隐藏组件？

How to hide a component in all nested routes with React router dom V6?

reactjs

react-router-dom

使用 javascript 正则表达式解决此问题：-