Prevent component render in specific page react-router

Question

The 'navbar' and 'footer' gets rendered on every component's page. Is there an way to prevent rendering 'footer' in the 'user' component?

App.js

   <Router>
    <Route>
      <Navbar />
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/About' exact component={About} />
      </Switch>
      <Footer />
    </Route>

    <Route>
      <Route path='/user' component={User} />
    </Route>

    <Route path='*' component={NotFound} />
  </Router>

Create two different layouts (say with footer and without footer) and use them with different pages. — SelvaS, Dec 17 '20 at 09:42
Try like this https://dev.to/xavivzla/react-router-v5-multiple-layouts-4fo4 — SelvaS, Dec 17 '20 at 09:46
I have edited my previous code, it is still not working. @SelvaS — Ansul, Dec 17 '20 at 10:49

score 1 · Answer 1 · answered Dec 17 '20 at 11:14

Move the <Router> to index.js file like below to get access to props.location inside App.js

<Router>
  <App />
</Router>

Inside your App.js file:

const App = ({ location }) => {
  return (
    <Route>
      <Navbar />
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/About' exact component={About} />
      </Switch>
      {location.pathname !== '/user' && <Footer /> }
    </Route>
    <Route>
      <Route path='/user' component={User} />
    </Route>

    <Route path='*' component={NotFound} />
  )
}

This solution works with react-router and react-router-dom v5+

Can you please edit the code and explain more clearly please.. — Ansul, Feb 23 '21 at 14:07

Prevent component render in specific page react-router

1 Answers1