Updated application to take advantage of the react router

UCF · Jun 27, 2024 · 57571f2 · 57571f2
1 parent ec534a9
commit 57571f2
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 3 deletions.
diff --git a/.env.template b/.env.template
@@ -4,4 +4,4 @@ VITE_REMOTE_HEADER_MENU_ID=23
 VITE_REMOTE_FOOTER_MENU_ID=24
 VITE_REMOTE_SOCIAL_LINKS_ID=26
 VITE_LOCATION_API_URL=https://www.ucf.edu/wp-json/wp/v2/locations/
-
+VITE_BASEURL=/
diff --git a/.github/workflows/azure-static-web-apps-delightful-moss-0832eaa0f.yml b/.github/workflows/azure-static-web-apps-delightful-moss-0832eaa0f.yml
@@ -21,6 +21,7 @@ jobs:
       VITE_REMOTE_FOOTER_MENU_ID: ${{ vars.VITE_REMOTE_FOOTER_MENU_ID }}
       VITE_REMOTE_SOCIAL_LINKS_ID: ${{ vars.VITE_REMOTE_SOCIAL_LINKS_ID }}
       VITE_LOCATION_API_URL: ${{ vars.VITE_LOCATION_API_URL_DEV }}
+      VITE_BASEURL: ${{ vars.VITE_BASEURL_DEV }}
     name: Build and Deploy Job
     steps:
       - uses: actions/checkout@v3

diff --git a/index.html b/index.html
@@ -5,7 +5,6 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
-    <base href="https://wwwdev.ucf.edu/map/">
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.7",
+    "react-router-dom": "^6.24.0",
     "sass": "^1.76.0"
   },
   "devDependencies": {

diff --git a/src/main.tsx b/src/main.tsx
@@ -3,9 +3,21 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import 'mapbox-gl/dist/mapbox-gl.css';
 import './index.scss'
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: (
+      <App />
+    )
+  }
+], {
+  basename: import.meta.env.BASE_URL
+})
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 )
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -6,6 +6,7 @@ interface ImportMetaEnv {
     readonly VITE_REMOTE_FOOTER_MENU_ID: number
     readonly VITE_REMOTE_SOCIAL_LINKS_ID: number
     readonly VITE_LOCATION_API_URL: string;
+    readonly VITE_BASEURL: string;
 }
 
 interface ImportMeta {