I don't want my header to be shown while I'm in my login page. Can i fixed that way?

// I have a global header component inside my router. But I want to hide on the login page. I tried to use window.location solution like this. It works but doesn't work after the login page navigates to the homepage. (it doesn't show header till I refresh the page) App.js import ...

   <div className="App">

      <Routes>

      <Route path='/login' />

      <Header /> 

      <Route path='/checkout' element={<Checkout />} />

      <Route path='/' element={<Home />} />

      </Routes>

  </div>

</Router>