From 6fa0903bdebe464739d67335b028b533cee60acc Mon Sep 17 00:00:00 2001
From: Dinh Long Nguyen <dinhlongviolin1@gmail.com>
Date: Wed, 7 Aug 2024 20:07:25 +0700
Subject: [PATCH] Decouple / proper navigation for base_url (#1643)

---
 frontend/taipy-gui/base/src/app.ts                   | 4 ++--
 frontend/taipy-gui/base/src/utils.ts                 | 2 +-
 frontend/taipy-gui/src/components/Taipy/Navigate.tsx | 6 ++++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/taipy-gui/base/src/app.ts b/frontend/taipy-gui/base/src/app.ts
index f484232634..ebf21ed89a 100644
--- a/frontend/taipy-gui/base/src/app.ts
+++ b/frontend/taipy-gui/base/src/app.ts
@@ -49,7 +49,7 @@ export class TaipyApp {
         path: string | undefined = undefined,
         socket: Socket | undefined = undefined,
     ) {
-        socket = socket || io("/", { autoConnect: false, path: `${getBase()}socket.io` });
+        socket = socket || io("/", { autoConnect: false, path: `${this.getBaseUrl()}socket.io` });
         this.onInit = onInit;
         this.onChange = onChange;
         this.variableData = undefined;
@@ -232,7 +232,7 @@ export class TaipyApp {
 
     updateContext(path: string | undefined = "") {
         if (!path || path === "") {
-            path = window.location.pathname.slice(1);
+            path = window.location.pathname.replace(this.getBaseUrl(), "") || "/"
         }
         this.sendWsMessage("GMC", "get_module_context", { path: path || "/" });
     }
diff --git a/frontend/taipy-gui/base/src/utils.ts b/frontend/taipy-gui/base/src/utils.ts
index b4f48dfdaf..00da854d64 100644
--- a/frontend/taipy-gui/base/src/utils.ts
+++ b/frontend/taipy-gui/base/src/utils.ts
@@ -1,3 +1,3 @@
 export const getBase = () => {
-    return document.getElementsByTagName("base")[0].getAttribute("href");
+    return document.getElementsByTagName("base")[0].getAttribute("href") || "/";
 };
diff --git a/frontend/taipy-gui/src/components/Taipy/Navigate.tsx b/frontend/taipy-gui/src/components/Taipy/Navigate.tsx
index dc8a946365..2da0746607 100644
--- a/frontend/taipy-gui/src/components/Taipy/Navigate.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Navigate.tsx
@@ -15,6 +15,7 @@ import { useContext, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { TaipyContext } from "../../context/taipyContext";
 import { createNavigateAction } from "../../context/taipyReducers";
+import { getBaseURL } from "../../utils";
 
 interface NavigateProps {
     to?: string;
@@ -32,6 +33,7 @@ const Navigate = ({ to, params, tab, force }: NavigateProps) => {
     useEffect(() => {
         if (to) {
             const tos = to === "/" ? to : "/" + to;
+            const navigatePath = getBaseURL() + tos.slice(1)
             const filteredParams = params
                 ? Object.keys(params).reduce((acc, key) => {
                       if (!SPECIAL_PARAMS.includes(key)) {
@@ -56,10 +58,10 @@ const Navigate = ({ to, params, tab, force }: NavigateProps) => {
             // Regular navigate cases
             if (Object.keys(state.locations || {}).some((route) => tos === route)) {
                 const searchParamsLocation = new URLSearchParams(location.search);
-                if (force && location.pathname === tos && searchParamsLocation.toString() === searchParams.toString()) {
+                if (force && location.pathname === navigatePath  && searchParamsLocation.toString() === searchParams.toString()) {
                     navigate(0);
                 } else {
-                    navigate({ pathname: to, search: `?${searchParams.toString()}` });
+                    navigate({ pathname: navigatePath, search: `?${searchParams.toString()}` });
                     // Handle Resource Handler Id
                     const tprh = params?.tprh;
                     if (tprh !== undefined) {