//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);