Route set up

ui/package.json

@@ -9,6 +9,7 @@
     "eslint": "^8.17.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

ui/src/App.js

@@ -1,8 +1,17 @@
 import Header from "./components/Header/Header";
+import { Routes, Route } from "react-router-dom";
+
 
 function App() {
   return (
-    <div>Hey</div>
+    <Routes>
+      <Route path="/" />
+      <Route path="/login" element={<Login />} />
+      <Route path="/flag?mode=edit" element={<FlagEdit />} />
+      <Route path="/flag?mode=create" element={<FlagCreate />} />
+
+
+    </Routes>
   );
 }
 

ui/src/Components/FlagMode/FlagCreate.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const FlagCreate = () => {
+  return <div>FlagCreate</div>;
+};
+
+export default FlagCreate;

ui/src/Components/FlagMode/FlagEdit.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const FlagEdit = () => {
+  return <div>FlagEdit</div>;
+};
+
+export default FlagEdit;

ui/src/Components/Login/Login.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Login = () => {
+  return <div>Login</div>;
+};

ui/src/index.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from "react-router-dom";
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );