如何隐藏某些路线的某些组件

发布于 2025-01-25 07:24:17 字数 1125 浏览 4 评论 0 原文

我想在某些路线中隐藏标题和页脚组件，e; g for 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 />

标题和页脚也会渲染。但是我想将它们隐藏在此特定路线上。那我该怎么做呢？

我正在使用React-Router版本5

原文

I want to hide Header and Footer Component in some routes, e;g for path="/invoice/:id/print"

I have an app with this type of layout using 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>

The problem is if I go to

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

Then Header and Footer also get rendered. But I want to hide them for this specific route. So how can I do that?

I'm using react-router version 5

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痴情 2025-02-01 07:24:17

这取决于应渲染标题和页脚组件的几页。
如果您只想在几页上渲染它们，最简单的解决方案将是将它们移至您想要渲染的组件/页面。

如果您只想将它们隐藏在一个或两个地方，则可以使用 useroutematch 钩子。

您还可以构建一些摘要来简化可读性：让我们制作布局组件，该组件将接受Prop（例如 renderheadsheaderanderandfooter （您可以更改当然的名称

That depends on how many pages should render the Header and Footer components.
If you want to render them on just a few pages, the simplest solution will be to move them to the components/pages where you'd like to render them.

If you'd like to hide them in just one or two places you can use the useRouteMatch hook.

You can also build some abstractions to simplify the readability a bit: let's make the Layout component, which will accept a prop (like renderHeaderAndFooter (you can change the name of course ????)).

Layout component:

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

and the place of usage:

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

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

回复收藏 0 原文

花海 2025-02-01 07:24:17

简单的方法是通过在所需的每个组件中使用userOuteMatch触发当前路线，例如：

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


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

check

simple way is to trigger your current route by using useRouteMatch in every component you want like:

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


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

check this

回复收藏 0 原文