better react-router-dom idiom (#50)

ui/src/App.js

@@ -4,8 +4,10 @@ import Network from './Network';
 import Token from './Token';
 import Version from './Version';
 import { useEffect, useState } from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Register from "./Register";
 
-const App = () => {
+const Overview = () => {
     const [user, setUser] = useState();
 
     useEffect(() => {
@@ -52,5 +54,16 @@ const App = () => {
     );
 }
 
+const App = () => {
+    return (
+        <Router>
+            <Routes>
+                <Route path={"/"} element={<Overview />}/>
+                <Route path={"register/:token"} element={<Register />} />
+            </Routes>
+        </Router>
+    );
+}
+
 export default App;
 

ui/src/Register.js

@@ -1,6 +1,13 @@
+import { useParams } from 'react-router-dom';
+
 const Register = () => {
+    const { token } = useParams();
+
     return (
-        <h1>Register!</h1>
+        <div>
+            <h1>Register!</h1>
+            <p>token = "{token}"</p>
+        </div>
     )
 }
 

ui/src/index.js

@@ -1,26 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
-import Register from "./Register";
 import * as gateway from "./api/gateway";
-import {createBrowserRouter, RouterProvider} from "react-router-dom";
+import App from "./App";
-
-const router = createBrowserRouter([
-    {
-        path: "/",
-        element: <App />,
-    },
-    {
-        path: "/register",
-        element: <Register />,
-    }
-]);
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <App />
   </React.StrictMode>
 );