How can I remove Footer Component only in specific page?

Question

(I'm using React - Class Component)

I'm looking for how to remove Footer component only in specific page, but i have no idea. Actually I don't have no idea about what keyword to search.

Below code is my Router.js

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Navbar />
        <Switch>
          <Route exact path="/" component={Main}></Route>
          <Route exact path="/review" component={ReviewPage}></Route>
        </Switch>
        <Footer />
      </Router>
    );
  }
}

export default Routes;

I put Footer and Navbar Component in router like that because those are always exists in every page. But unfortunately I just found that in ReviewPage, there is NO FOOTER....

How can i remove Footer only in ReviewPage? Please give me hint !

Perhaps this will help: https://stackoverflow.com/questions/65655479/seperate-route-from-rest-of-layout-react/65655723#65655723 — Scott Gnile, May 13 '21 at 12:24
include the ```
``` just inside the ```Main``` component and not in the ```Routes``` component ? — VersifiXion, May 13 '21 at 12:27

Surjeet Bhadauriya · Accepted Answer · 2021-05-13T14:54:10.010

You can use location.pathname. It returns the current url path name. And then you can set a condition as below:

{location.pathname !== '/review' && <Footer />}

Solution

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Navbar />
        <Switch>
          <Route exact path="/" component={Main}></Route>
          <Route exact path="/review" component={ReviewPage}></Route>
        </Switch>
        {location.pathname !== '/review' && <Footer /> }
      </Router>
    );
  }
}

export default Routes;

How can I remove Footer Component only in specific page?

1 Answers1

Solution