I am building a website and I don't want to display the navbar in 2 pages. One is the 404 page where I will be giving a redirect button. The other is the landing page of the website where I will be a giving a button which would redirect to the home page of the website. This is my app.js code where I have my routes defined.

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Navbar from "./Components/Navbar";
import Home from "./Components/Pages/Home";
import PlanYourTrip from "./Components/Pages/PlanYourTrip";
import AboutUs from "./Components/Pages/AboutUs";
import SafetyMeasures from "./Components/Pages/SafetyMeasures";
import Travel from "./Components/Pages/Travel";
import Error from "./Components/Pages/404";

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Switch>
          <Route path="/" exact ponent={Travel} />
          <Route path="/home" exact ponent={Home} />
          <Route path="/plan-your-trip" exact ponent={PlanYourTrip} />
          <Route path="/about-us" exact ponent={AboutUs} />
          <Route path="/safety-measures" exact ponent={SafetyMeasures} />
          <Route ponent={Error} />
        </Switch>
      </Router>
    </>
  );
}

export default App;

I want to remove the navbar from <Route path="/" exact ponent={Travel} /> and <Route ponent={Error} /> . Please help.

I am building a website and I don't want to display the navbar in 2 pages. One is the 404 page where I will be giving a redirect button. The other is the landing page of the website where I will be a giving a button which would redirect to the home page of the website. This is my app.js code where I have my routes defined.

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Navbar from "./Components/Navbar";
import Home from "./Components/Pages/Home";
import PlanYourTrip from "./Components/Pages/PlanYourTrip";
import AboutUs from "./Components/Pages/AboutUs";
import SafetyMeasures from "./Components/Pages/SafetyMeasures";
import Travel from "./Components/Pages/Travel";
import Error from "./Components/Pages/404";

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Switch>
          <Route path="/" exact ponent={Travel} />
          <Route path="/home" exact ponent={Home} />
          <Route path="/plan-your-trip" exact ponent={PlanYourTrip} />
          <Route path="/about-us" exact ponent={AboutUs} />
          <Route path="/safety-measures" exact ponent={SafetyMeasures} />
          <Route ponent={Error} />
        </Switch>
      </Router>
    </>
  );
}

export default App;

I want to remove the navbar from <Route path="/" exact ponent={Travel} /> and <Route ponent={Error} /> . Please help.

• javascript
• reactjs

4 Answers 4

<Navbar /> needs to check to window.location and render empty

See https://reactrouter./web/api/Hooks/uselocation

Or create a new ponent that does the check and render it children

<MayRenderNav><Navbar /></MayRenderNav>

To add more context on uke answer you can use the useLocation hook inside your navbar an do something like this

// All the routes you want to exclude
const withouSidebarRoutes = ["/about"];

function Navbar() {
   const {pathname} = useLocation();

   // Validates if the current pathname includes one the routes you want to hide the sidebar is present on the current url
  // If that's true render null instead of the sidebar

   if (withouSidebarRoutes.some((item) => pathname.includes(item))) return null;

 return (
  //your navbar code.
 )
}

The includes is useful because if you have nested routes like about/1 it will exclude that one too, use a simple equal if you just want to exclude the about page and not the nested ones.

withouSidebarRoutes.some((item) => pathname === item)

Check the hooks api reference to see what the useLocation can do: https://reactrouter./web/api/Hooks/uselocation

Also I have a working sandbox with a sidebar that hides when you're in the about section. https://codesandbox.io/s/cranky-lewin-p8ozv

The problem with your code is that <Navbar /> ponent will load without caring about the route.

You can simply put your <Navbar /> ponent inside the ponents you want it to load in and simply leave for others.

This might feel a bit cheat, but it does the trick.

To hide navbar from homepage (path = "/") is quite straight-forward. We can do by the book, use render in "Route".

The tricky part is how to hide from 404 Error page, which doesn't match all other route in your website.

The trick I used is to call useEffect on Error page mount, change style of navbar to display: none;

import React from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import "./styles.css";

const NavBar = () => {
  return (
    <div className="navbar">
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
      <Link to="/error">Error</Link>
    </div>
  );
};

const Home = () => (
  <div>
    <h1>This is home</h1>
    <ul>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/contact">Contact</Link>
      </li>
    </ul>
  </div>
);
const About = () => <div>About</div>;
const Contact = () => <div>Contact</div>;
const Error = () => {
  React.useEffect(() => {
    document.getElementsByClassName("navbar")[0].style.display = "none";
  }, []);
  return (
    <div>
      <h1>Error</h1>
      <Link to="/">Back to home</Link>
    </div>
  );
};

export default function App() {
  return (
    <Router>
      <Route
        render={({ location }) => {
          if (location.pathname !== "/") return <NavBar />;
        }}
      />
      <Switch>
        <Route path="/" exact ponent={Home} />
        <Route path="/about" ponent={About} />
        <Route path="/contact" ponent={Contact} />
        <Route ponent={Error} />
      </Switch>
    </Router>
  );
}

body {
  margin: 0;
  padding: 0;
}
.App {
  font-family: sans-serif;
  text-align: center;
}

.navbar {
  background: black;
  color: white;
  padding: 10px 20px;
}

.navbar a {
  display: inline-block;
  padding: 6px 12px;
  text-decoration: none;
  color: white;
  text-transform: uppercase;
}

Link to sandbox