how to include Component in all other pages without writing it multiple times

Question

I want to display my navbar in all other router pages, but without writing <Nav/> many times because it will lead to rendering the same component many times. my router:

<Router>
  <Routes>
    <Route path="/Login" element={<Signup />} />
    <Route path="/Login/Signin" element={<Login />} />
    <Route path="/Home" element={<Home />} />
    <Route path="/Trend" element={<Search_Page />} />
    <Route path="/Popular" element={<Popular />} />
    <Route path="/Watch" element={<Watchingpage />} />
    <Route path="/Favorite" element={<Favorite />} />
  </Routes>
</Router>

enter image description here

The problem has been solved if I include the component in all other pages but it's not efficient at all.

enter image description here

The problem with this is that it's including <Nav/> in <Login/> & <SignUp/>, Which I don't want to.