(I'm using React - Class Component)

I'm looking for how to remove Footer ponent 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="/" ponent={Main}></Route>
          <Route exact path="/review" ponent={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 !

(I'm using React - Class Component)

I'm looking for how to remove Footer ponent 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="/" ponent={Main}></Route>
          <Route exact path="/review" ponent={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 !

• javascript
• reactjs
• class

• Perhaps this will help: stackoverflow./questions/65655479/… – Scott Gnile Commented May 13, 2021 at 12:24
• include the <Footer /> just inside the Main ponent and not in the Routes ponent ? – VersifiXion Commented May 13, 2021 at 12:27

2 Answers 2

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="/" ponent={Main}></Route>
          <Route exact path="/review" ponent={ReviewPage}></Route>
        </Switch>
        {window.location.pathname !== '/review' && <Footer /> }
      </Router>
    );
  }
}

export default Routes;

{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 />}
    </>