Why does the code shown below only work if certain parts arent included, i have two files but only one of them shows the real problem so i will focus on that one for now. Im going a bit insane because im searching for a solution for about 2 1/2 hours now.

import './App.css';
import Navbar from './Components/Navbar';
import {BrowserRouter as Router, Routes, Route } from 'react-router-dom'

function App() {
  return (

    
    <div className='App'>
      <h1> Hi </h1>
      
      
      <>
      <Router>
        <Navbar/>
          <Routes>
          <Route path='./Navbar' exact/>
          </Routes>
      </Router>
      </>
    </div>
  );
}

export default App;

the h1 here i set the text too hi for the evxample onyl gets shown on my website when i delete my entire Router Navbar and any other container below