How to hide certain Components for some Routes

Question

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

Bart Krakowski · Accepted Answer · 2022-04-30T20:44:43.117

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

score 2 · Answer 2 · answered Apr 30 '22 at 20:31

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

score 1 · Answer 3 · answered Apr 30 '22 at 20:40

You have to update the Header and Footer components by adding a listener during the rendering phase of the component : componentDidMount()

Fetch the called component : const shouldHide = useRouteMatch("/invoice/:id/print") || useRouteMatch("/other/route");

return (
 !shoudlHide && <Header />
)

How to hide certain Components for some Routes

3 Answers3