Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR JAVASCRIPT

hide navbar and footer on certain pages like dashboard. react-router

//you can do it by having a state that only when the state is true the nav and footer will render:

function App() {

  const [showNav, setShowNav- = useState(true);

  return (
    <Router>
   {   showNav &&
          <nav>
            <Navbar />
          </nav>
   } 
      <Routes>
        <Route index element={<Home />} />
        <Route path="/Dashboard" element={<Dashboard />} />
        <Route path="/Login" element={<Login />} />
        <Route path="/Price" element={<Price />} />
        <Route path="/Profile/:username" element={<Profile />} />

        <Route path="/*" element={<ErrorPage />} />
      </Routes>

    {showNav &&
          <footer>
            <Footer />
          </footer>
        </Router>

    }
  );
}
//And for example, if you don't want to show the nav in the homepage you will pass the setShowNav function as a prop and will set it to false:

<Route index element={<Home funcNav={setShowNav}/>} />
//in home page:

props.funcNav(false);
 
PREVIOUS NEXT
Tagged: #hide #navbar #footer #pages
ADD COMMENT
Topic
Name
7+2 =