Unable to hide navbar and footer in login and signup page react js router v6

Question

Here is my code ,I have searched many times but cannot find any appropreate answer to my question,

How I can prevent navbar and footer for my log in and signup page using react router v6

screenshot

         import Navigation from './Components/Navigation';
import Home from './Components/Home';
import Footer from './Components/Footer';
import About from './Components/About';
import Contact from './Components/Contact';
import Login from './Components/Login';
import SignUp from './Components/SignUp';
import { BrowserRouter, Route, Routes } from 'react-router-dom'
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navigation />
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='about' element={<About />} />
          <Route path='contact' element={<Contact />} />
          <Route path='login' element={<Login />}/>
          <Route path='signup' element={<SignUp />}/>
        </Routes>
        <Footer />
      </BrowserRouter>
    </div>
  );
}

Thanks in advance..