Get app displaying again

Author: GrahamTheCoder

Web/ClientApp/src/App.test.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { MemoryRouter } from 'react-router-dom';
 import App from './App';
 
 it('renders without crashing', async () => {
     const div = document.createElement('div');
-    ReactDOM.render(
+    const root = createRoot(div);
+    root.render(
         <MemoryRouter>
             <App />
-        </MemoryRouter>, div);
+        </MemoryRouter>
+    );
     await new Promise(resolve => setTimeout(resolve, 1000));
 });

Web/ClientApp/src/App.tsx

@@ -1,10 +1,9 @@
 import * as Api from "./Api"
 import React, { Component, useEffect, useState } from "react";
-import { Route } from "react-router";
+import { Route, Routes } from "react-router";
 import Layout from "./components/Layout";
-import { Routes } from "react-router-dom";
 import { Home } from "./components/Home";
-import { About} from "./components/About";
+import { About } from "./components/About";
 
 import "./custom.css"
 
@@ -20,7 +19,7 @@ const App = () => {
     return (
         <Layout>
             <Routes>
-                <Route path="/" element={<Home />}/>
+                <Route path="/" element={<Home />} />
                 <Route path="/about" element={<About />} />
             </Routes>
             <hr />

Web/ClientApp/src/index.tsx

@@ -1,16 +1,18 @@
 import 'bootstrap/dist/css/bootstrap.css';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 
-const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href') || undefined;
+const baseUrl = document.getElementsByTagName('base')[0]?.getAttribute('href') || undefined;
 
 const container = document.getElementById('root');
 const root = createRoot(container!);
-
+let normalizedBaseUrl = baseUrl;
+if (normalizedBaseUrl && normalizedBaseUrl.endsWith('/') && normalizedBaseUrl !== '/') {
+    normalizedBaseUrl = normalizedBaseUrl.substring(0, normalizedBaseUrl.length - 1);
+}
 root.render(
     <BrowserRouter basename={baseUrl}>
         <App />