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

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

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.