How stop display navbar on specific pages like 404 error page in Reactjs?

user_12206814 0
Viewed 1189

I have started to learn Reactjs. I am trying to build a multiple page webapp and. As you can see from my code, there are a navbar and switch statement. The last line of the switch tag is the not found page and on that page I want that none of the navbar to be displayed. I could not find a way to make it happen.

In the simple way how to disable navbar in 404 error page?

function App() {
  return (

    <BrowserRouter>
      <>
        <div className="container">
        <Navbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/contact" component={Contact} />
          <Route component={Pagenotfound} />
        </Switch>

        </div>
      </>
    </BrowserRouter>
  );
}

export default App;
react-router reactjs routes
3 Answers

The most simplest way will be:

function App() {
  return (
    <BrowserRouter>
      <>
        <div className="container">
         <Switch>
          <Route exact path="/">
             <Navbar />
             <Home />
          </Route>
          <Route exact path="/about">
             <Navbar />
             <About />
          </Route>
          <Route exact path="/contact">
             <Navbar />
             <Contact />
          </Route>
          <Route component={Pagenotfound} />
         </Switch>
        </div>
      </>
    </BrowserRouter>
  );
}

export default App;

Now, the problem with this approach is you need to write Navbar many times. To minimize that, you can write a functional component like a wrapper of Route. For example:

function RouteWithNavBar({component:Component, ...rest}){
return
 (
   <Route {...rest}>
    <Navbar />
    <Component />
   </Route>
 );
}

And then instead of using

<Route exact path="/" component={Home} />

, you can use

<RouteWithNavBar exact path="/" component={Home} />
user_126809710

You can do this:

function App() {
return (
<BrowserRouter>
  <Switch>
     <Route exact path="/notfound" component={Pagenotfound} />
     <Route>
       <div className="container">
          <Navbar />
            <Switch>
             <Route exact path="/" component={Home} />
             <Route exact path="/about" component={About} />
             <Route exact path="/contact" component={Contact} />
             <Redirect to="/notfound"/>
           </Switch>
       </div>
    </Route>

  </Switch>

</BrowserRouter>
  );
}
export default App;
user_97464450

Try this

import {
  BrowserRouter,
  Route,
  Switch,
  Redirect,
  useLocation
} from "react-router-dom";


function Navbar(){
 let location = useLocation();

  if(location.pathname === '/404'){
    return null;
  }

  return (<div>
     //...Your NavBar Code
    </div>)
}


function App() {
  return (

    <BrowserRouter>
      <>
        <div className="container">
        <Navbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/contact" component={Contact} />
          <Route path="*">
            <Redirect to="/404" />
          </Route>
          <Route path="/404" component={Pagenotfound} />
        </Switch>

        </div>
      </>
    </BrowserRouter>
  );
}

export default App;

So basically any path that is not defined will be redirected to the 404 and And when the path is /404, your NavBar component will return null instead of the navbar. Let me know if you have problems.

user_63270370
Related