Why does neither one of my texts get displayed - html

Question

The code down below shows my work in react, where i freshly startet my project and i am still pretty new in this kind of area. I have one simple question that i am just cant comprehend. Its probalby something simple. I expected the h1 with the text Hi too get rendered or to get foo as output, but my website isnt showing any text at all
App.js
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='/' exact/>
</Routes>
</Router>
</>
</div>
);
}
export default App;
Navbar.js
import './Navbar.css';
import React, {useState} from 'react'
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav className='navbar'>
<div className='navbar-container'>
<Link to="/" >foo</Link>
</div>
</nav>
)
}
export default Navbar;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
After further testing it has shown that when i delete everything in the return function of App.js except the h1 Hi gets rendered.

Answer 1

I am gussing probably this is the issue. You are using React <18 and trying to use createRoot which is not there.
Change
//Don't use below because it's in React 18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
to
let rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
Here is working example https://stackblitz.com/edit/github-pagkyw

Answer 2

The code is working properly now. The issue was that i installed react-router-dom one folder above the normal rreact app so that i had two seperate package.json files. I've uninstalled react-router-dom and reinstalled it in the same folder of the react folder. The json files got merged and then it worked after reloading