From 3a45ced9e118b7c9652bc7c110d4a01da0ea97aa Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Mon, 19 Sep 2022 15:37:49 -0400
Subject: [PATCH] better react-router-dom idiom (#50)

---
 ui/src/App.js      | 15 ++++++++++++++-
 ui/src/Register.js |  9 ++++++++-
 ui/src/index.js    | 17 ++---------------
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/ui/src/App.js b/ui/src/App.js
index 63d5f531..a046a1af 100644
--- a/ui/src/App.js
+++ b/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;
 
diff --git a/ui/src/Register.js b/ui/src/Register.js
index 8288535f..2ba7bd18 100644
--- a/ui/src/Register.js
+++ b/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>
     )
 }
 
diff --git a/ui/src/index.js b/ui/src/index.js
index 188b962f..f36895b2 100644
--- a/ui/src/index.js
+++ b/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";
-
-const router = createBrowserRouter([
-    {
-        path: "/",
-        element: <App />,
-    },
-    {
-        path: "/register",
-        element: <Register />,
-    }
-]);
+import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <App />
   </React.StrictMode>
 );