Implement dynamic router base path retrieval for improved routing

src/index.tsx

@@ -5,6 +5,7 @@ import "./index.css";
 import configureStore from "./redux/configureStore";
 import { Provider as ReduxProvider } from "react-redux";
 import "./utils/i18n";
+import { getRouterBasePath } from "./utils/paths";
 
 const store = configureStore();
 
@@ -17,7 +18,7 @@ const root = createRoot(container);
 
 root.render(
   <ReduxProvider store={store}>
-    <Router basename={import.meta.env.BASE_URL}>
+    <Router basename={getRouterBasePath()}>
       <App />
     </Router>
   </ReduxProvider>

src/utils/paths.ts

@@ -14,3 +14,12 @@ export const getPublicPath = (path: string): string => {
   const normalizedBase = basePath.endsWith("/") ? basePath : `${basePath}/`;
   return `${normalizedBase}${cleanPath}`;
 };
+
+export const getRouterBasePath = (): string | undefined => {
+  const basePath = getBasePath();
+  if (basePath === "/") return undefined;
+  // Remove trailing slash if present and ensure it starts with a slash
+  let baseUrl = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath;
+  baseUrl = baseUrl.startsWith("/") ? baseUrl : `/${baseUrl}`;
+  return baseUrl;
+};