React-router-dom showing blank screen

Question

I am trying to figure out React and am not sure what is wrong here, as the browser shows a blank.

Here is the Code.

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link} from "react-router-dom";
import Home from './Home';

function App() {
    return (
        <>
            <Router>
                <Routes>
                    <Route exact path="/" element={<Home />}/>
                </Routes>
            </Router>
        </>
    );
  }
  
export default App;

Update 1 -

The code as viewed on index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );

Answer 1

This is a react@18 change in how React apps are rendered. createRoot takes a DOMNode reference, not JSX. Once the root is created, then you can call a render method on it.

Example:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

See react-dom-client for more in-depth detail.