fix: 404 Not Found error when baseUrl is not /

Author: rinsuki

src/index.tsx

@@ -21,7 +21,14 @@ declare global {
 
 const buildAPIUrl = (env: Environment): string => {
   if (!env.isDev) {
-    return `${document.location.origin}/api/`;
+    const fallbackAPIUrl = `${document.location.origin}/api/`;
+    try {
+      const base = document.querySelector('base')?.href;
+      if (base != null) return new URL('api/', base).href;
+    } catch (e) {
+      console.error('Failed to determine API path', e);
+    }
+    return fallbackAPIUrl;
   }
 
   // NOTE: Do not edit those `process.env.VAR_NAME` variable accesses

src/router/Routes.tsx

@@ -10,21 +10,39 @@ export type Props = {
   RootComponent: JSX.Element;
 };
 
+const pathname = (href: string | undefined) => {
+  if (href == null) return undefined;
+  try {
+    return new URL(href).pathname;
+  } catch (e) {
+    console.error('Failed to determine base path', e);
+    return undefined;
+  }
+};
+
 export const Routes = function Routes(props: Props) {
   const createRouter = props.router.isInMemory ? createMemoryRouter : createBrowserRouter;
+  const opts = props.router.isInMemory
+    ? undefined
+    : {
+        basename: pathname(document.querySelector('base')?.href),
+      };
 
-  const router = createRouter([
-    {
-      path: '/',
-      element: props.RootComponent,
-      children: [
-        {
-          path: ApplicationPath.ServiceMap,
-          element: <ServiceMapApp />,
-        },
-      ],
-    },
-  ]);
+  const router = createRouter(
+    [
+      {
+        path: '/',
+        element: props.RootComponent,
+        children: [
+          {
+            path: ApplicationPath.ServiceMap,
+            element: <ServiceMapApp />,
+          },
+        ],
+      },
+    ],
+    opts,
+  );
 
   return <RouterProvider router={router} />;
 };