如何为某些路由隐藏某些组件

Question

我想在某些路由中隐藏页眉和页脚组件，例如 path="/invoice/:id/print"

我有一个使用 react-router-dom v5

布局的应用程序

<Router>
        <Header />

        <main className="py-0 px-0">
          <div>
            <Container fluid>
              <Switch>
                <Route path="/" component={HomeScreen} exact />
                <Route path="/invoices" component={Invoices} exact />
                <Route path="/invoice/:id/print" component={InvoicePrint} exact />
                <Route path="/billing/invoice/create" component={InvoiceCreate} exact />
                <Route path="*" exact>
                  <Error404 />
                </Route>
              </Switch>
            </Container>
          </div>
        </main>

        <Footer />
      </Router>

问题是如果我去

<Route path="/invoice/:id/print" component={InvoicePrint} exact />

然后页眉和页脚也被渲染。但我想为这条特定路线隐藏它们。那我该怎么做呢？

I'm using react-router version 5

Answer 1

简单的方法是在您想要的每个组件中使用 useRouteMatch 来触发当前路由，例如：

 const match = useRouteMatch("/invoice/:id/print"); // import { useRouteMatch } from "react-router-dom";


 return !!match ? <></> : <Footer/> //or Header

检查this

Answer 2

这取决于应呈现页眉和页脚组件的页面数量。如果您只想在几页上呈现它们，最简单的解决方案是将它们移动到您想要呈现它们的 components/pages。

如果您只想将它们隐藏在一两个地方，您可以使用 useRouteMatch 挂钩。

您还可以构建一些抽象来稍微简化可读性：让我们制作 Layout 组件，它将接受一个 prop（例如 renderHeaderAndFooter（当然您可以更改名称）） .

布局组件：

const Layout = ({ renderHeaderAndFooter, children }) => (
  <div>
    {renderHeaderAndFooter && (
      <Header />
    )}
    {children}
    {renderHeaderAndFooter && (
      <Footer />
    )}
  </div>
)

及使用地点：

const HomeScreen = () => (
  <Layout renderHeaderAndFooter={true}>
    // make stuff
  </Layout>
)

const Invoices = () => (
  <Layout renderHeaderAndFooter={false}>
    // make stuff
  </Layout>
)

Answer 3

您必须通过在组件的呈现阶段添加侦听器来更新页眉和页脚组件：componentDidMount()

获取调用的组件： const shouldHide = useRouteMatch("/invoice/:id/print") || useRouteMatch("/other/route");

return (
 !shoudlHide && <Header />
)

如何为某些路由隐藏某些组件

How to hide certain Components for some Routes

reactjs

react-router-dom