Feat: Update React app Routing strategy (#153)

* configure react app basename for server builds

* chore: prettier

* update server comment

* run prettier again

* leverage hash router for client side routing

* remove basename prop

* update anchor copy

* chore: prettier

Author: EvanReinstein

client/index.html

@@ -256,9 +256,7 @@ <h2>Dynamic Examples</h2>
         Prebuilt Pages (React)
         <ul>
           <li>
-            <a href="/client/prebuiltPages/react/oneTimePayment/dist/index.html"
-              >One-Time Payment (React)</a
-            >
+            <a href="/client/prebuiltPages/react/dist/">React Demos</a>
           </li>
         </ul>
       </li>

client/prebuiltPages/react/src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+import { Routes, Route, Link, HashRouter } from "react-router-dom";
 import { PayPalProvider } from "@paypal/react-paypal-js/sdk-v6";
 import { ErrorBoundary, useErrorBoundary } from "react-error-boundary";
 
@@ -98,7 +98,7 @@ function App() {
         ]}
         pageType="checkout"
       >
-        <BrowserRouter>
+        <HashRouter>
           <Navigation />
           <Routes>
             {/* Home page */}
@@ -176,7 +176,7 @@ function App() {
               element={<ErrorBoundaryTestPage />}
             />
           </Routes>
-        </BrowserRouter>
+        </HashRouter>
       </PayPalProvider>
     </ErrorBoundary>
   );

client/prebuiltPages/react/vite.config.ts

@@ -2,9 +2,9 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 
 // https://vite.dev/config/
-export default defineConfig({
+export default defineConfig(({ command }) => ({
   plugins: [react()],
-  base: "./",
+  base: command === "build" ? "/client/prebuiltPages/react/dist" : "./",
   server: {
     port: 3000,
     proxy: {
@@ -15,4 +15,4 @@ export default defineConfig({
       },
     },
   },
-});
+}));