I want to hide my navbar on the first landing page of my site. In my app.js I put the navbar and other routes inside a div and made it so that it renders after the login page. But now when i go to look at the site nothing is printing on the page, not the login nor navbar.

return (
  <div className="App">
    <Router>
      <Routes>
        <Route path="/login" exact component={<Login/>} />
        <Route path="/signup" element = {<Signup/>}/>
          <div>
            <Navbar/>
              <Route path="/onboarding" element={<Onboarding />} />
              <Route path="/training material" exact component={<Training/>}/>
              <Route path="/contract" exact component={<Contract/>}/>
          </div>
      </Routes>
    </Router>
  </div>
);