I'd like for all the pages to have a header and a footer from their respecitve objects, but when the user gets to the home page login (the first line in the Routes), I don't want them to be visible. I'm not 100% sure how to resolve this, because no matter where I put the login route, the header and the footer will get rendered. I've tried playing around with it with no success. Any hints, please? Just to add, the idea is to have a login page that will take the user to the inner part of the page, which would otherwise be inaccessible for an unlogged user. This is from the App.jsx:

<div>
      <Router>
        <UserContext.Provider value={{user, setUser}}>
        <ToastContainer/>
        <Header />
      <Routes>
        <Route exact path="/" element={<Login/>}/>
        <Route exact path="/signup" element={<Signup/>}/>
        <Route exact path="/katalog" element={<Katalog/>}/>
        <Route exact path="/pridatkomunitu" element={<Pridatkomunitu/>}/>
      </Routes>
      <Footer/>
      </UserContext.Provider>
      </Router>
</div>