How to remove the footer on one of the pages?

Question

React

Hello comrades.
there is such a piece of code in my App.jsx

<Fragment>
        <Header />
        <Container>
          <Switch>
            <Route exact path="/" component={Menu} />
            <Route path="/catalog/:id" component={Catalog} />
            <Route path="/delivery" component={Delivery} />
            <Route path="/pay" component={Pay} />
            <Route path="/about" component={About} />
            <Route path="/basket" component={Basket} />
            <Route component={NotFound} />
          </Switch>
        </Container>
        <Footer />
        <ScrollReset />
      </Fragment>

Depending on the Route, we draw one or another component in the Container. Header and Footer are always displayed. How to make, for example, when visiting a page with "/basket" only Header and Container are displayed. In short, how to disable the display of Footer on a particular route?

Answer 1

Conditional rendering .
Wrap the App in withRouter: Add a condition:
Display footer by condition:
{shouldShowFooter && <Footer />}