React using react-router-dom shows nothing on screen - reactjs

Question

No error message but it just shows a white screen nothing more. These 3 components matter, the other ones are just unedited snippets (ES6 rafce). The only error I got was useHistory imported but not used, but this one mysteriously disappeared upon restarting the app (npm start). I did change the index a bit before restarting however, but that was just changing component in the Route to element as you can see below.
Edit (because of duplicate question): I know that this route in the index to route the root to app is kind of weird but I tried importing routes as well and enclosing it in it, as well as just using the <App /> directly. Both still gave a white a screen. I think it probably has something to do with the navbar because I was working on it when this problem first occured. However I first added the Links in the navbar only after I added the routes to App and the BrowserRouter to index. So there could be something wrong there as well.
Index component
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router, Route } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<Route path="/" element={<App />} />
</Router>
</React.StrictMode>
);
App component
//App.js
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Home from './components/Home';
import AboutUs from './components/AboutUs';
import Contact from './components/Contact';
import Missing from './components/Missing';
import { Route, Routes, useHistory } from 'react-router-dom';
function App() {
return (
<div className="App">
<Navbar />
<Routes>
<Route exact path="/">
<Home />
</Route>
<Route path="/contact">
<Contact />
</Route>
<Route path="/about_us" element={<AboutUs />} />
<Route path="*" element={<Missing />} />
</Routes>
<Footer />
</div>
);
}
export default App;
Navbar component
//Navbar.js
import React from 'react';
import logo from "../images/Odanhu1.png";
import { FaInstagram, FaUser } from 'react-icons/fa';
import { Link } from 'react-router-dom';
const Navbar = () => {
return (
<nav>
<div>
<ul>
<li><Link to="/">
<figure>
<img src={logo} alt="logo" />
<figcaption>danhu</figcaption>
</figure>
</Link></li>
<li><FaInstagram /></li>
<li><Link to="/about_us">About us</Link></li>
<li><Link to="/contact">Contact</Link></li>
<li><p>Partners</p></li>
</ul>
<ul>
<li><Link><FaUser /></Link></li>
</ul>
</div>
<div>
<p></p>
</div>
</nav>
)
}
export default Navbar

Answer 1

You don't need to wrap your App component in a <route> when you render it.
Try this:
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';
//you don't need to routes in index and the app file
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<App/>
</Router>
</React.StrictMode>
);