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

score 7 · Accepted Answer · edited Aug 16 '23 at 08:52

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

{window.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>
        {window.location.pathname !== '/review' && <Footer /> }
      </Router>
    );
  }
}

export default Routes;

score 0 · Answer 2 · answered Dec 23 '21 at 10:14

{Location.pathname === '/photographer/:id' && }

and you can see new version React-router

Now use Location != location and it works

    <>
        <Header />
        <main>
            <Container>
            
                <Routes>
                    <Route path='/' element={<HomeScreen />}></Route>
                    <Route
                        path='/photographer/:id'
                        element={<PhotographersScreen/>}
                        ></Route>
                </Routes>
                
            </Container>
        </main>
        {Location.pathname === '/photographer/:id' && <Footer />}
    </>

How can I remove Footer Component only in specific page?

2 Answers2

Solution