diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
index 0aca81bc7e2a2..deba7682f22ff 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
@@ -75,7 +75,7 @@ const CHART_ROW_HEIGHT = 20;
 const MIN_BAR_WIDTH = 10;
 
 export const Gantt = ({ limit }: Props) => {
-  const { dagId = "", groupId: selectedGroupId, runId, taskId: selectedTaskId } = useParams();
+  const { dagId = "", groupId: selectedGroupId, runId = "", taskId: selectedTaskId } = useParams();
   const { openGroupIds } = useOpenGroups();
   const { t: translate } = useTranslation("common");
   const { selectedTimezone } = useTimezone();
@@ -101,7 +101,7 @@ export const Gantt = ({ limit }: Props) => {
   // Get grid summaries for groups (which have min/max times)
   const { data: gridTiSummaries, isLoading: summariesLoading } = useGridTiSummaries({
     dagId,
-    runId: runId ?? "",
+    runId,
     state: selectedRun?.state,
   });
 
@@ -109,7 +109,7 @@ export const Gantt = ({ limit }: Props) => {
   const { data: taskInstancesData, isLoading: tiLoading } = useTaskInstanceServiceGetTaskInstances(
     {
       dagId,
-      dagRunId: runId ?? "~",
+      dagRunId: runId,
     },
     undefined,
     {
@@ -124,7 +124,7 @@ export const Gantt = ({ limit }: Props) => {
   const isLoading = runsLoading || structureLoading || summariesLoading || tiLoading;
 
   const data = useMemo(() => {
-    if (isLoading || runId === undefined) {
+    if (isLoading || runId === "") {
       return [];
     }
 
@@ -222,7 +222,7 @@ export const Gantt = ({ limit }: Props) => {
     ],
   );
 
-  if (runId === undefined) {
+  if (runId === "") {
     return undefined;
   }
 
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts b/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts
index 34d5a740e9da8..882b31c85f52c 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts
@@ -23,6 +23,7 @@ import type { NavigateFunction, Location } from "react-router-dom";
 import type { GridRunsResponse, TaskInstanceState } from "openapi/requests";
 import { getDuration } from "src/utils";
 import { formatDate } from "src/utils/datetimeUtils";
+import { buildTaskInstanceUrl } from "src/utils/links";
 
 export type GanttDataItem = {
   isGroup: boolean;
@@ -38,7 +39,7 @@ type HandleBarClickOptions = {
   data: Array<GanttDataItem>;
   location: Location;
   navigate: NavigateFunction;
-  runId: string | undefined;
+  runId: string;
 };
 
 type ChartOptionsParams = {
@@ -61,9 +62,18 @@ export const createHandleBarClick =
       if (clickedData) {
         const { isGroup, isMapped, taskId } = clickedData;
 
+        const taskUrl = buildTaskInstanceUrl({
+          currentPathname: location.pathname,
+          dagId,
+          isGroup,
+          isMapped: Boolean(isMapped),
+          runId,
+          taskId,
+        });
+
         navigate(
           {
-            pathname: `/dags/${dagId}/runs/${runId}/tasks/${isGroup ? "group/" : ""}${taskId}${isMapped ? "/mapped" : ""}`,
+            pathname: taskUrl,
             search: location.search,
           },
           { replace: true },