From f9e53aa9a809ba76e379ae8c9393ea1f02868180 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Fri, 26 Sep 2025 08:51:04 -0700
Subject: [PATCH] Prevent full-page reloads when clicking some currently
 selected navbar links (#33500)

## For #31752



https://github.com/user-attachments/assets/3eaff439-b2be-4849-a1ae-b21fe8d67b97


- [x] Changes file added for user-visible changes in `changes/`
- [x] QA'd all new/changed functionality manually

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 ...2-clicking-active-nav-causes-page-rerender |  1 +
 .../top_nav/SiteTopNav/SiteTopNav.tsx         | 19 ++++++++-----------
 2 files changed, 9 insertions(+), 11 deletions(-)
 create mode 100644 changes/31752-clicking-active-nav-causes-page-rerender

diff --git a/changes/31752-clicking-active-nav-causes-page-rerender b/changes/31752-clicking-active-nav-causes-page-rerender
new file mode 100644
index 0000000000..5bb8b71c40
--- /dev/null
+++ b/changes/31752-clicking-active-nav-causes-page-rerender
@@ -0,0 +1 @@
+- Fix a bug where clicking the currently selected navbar item would cause a full-page rerender
diff --git a/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx b/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx
index 60b0a8d3b6..727da40f34 100644
--- a/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx
+++ b/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx
@@ -164,18 +164,15 @@ const SiteTopNav = ({
     }
 
     if (active && !isActiveDetailPage) {
-      const path = navItem.alwaysToPathname
+      let path = navItem.alwaysToPathname
         ? navItem.location.pathname
         : currentPath;
 
-      const includeTeamId = (activePath: string) => {
-        if (currentQueryParams.team_id !== API_ALL_TEAMS_ID) {
-          return getPathWithQueryParams(path, {
-            team_id: currentQueryParams.team_id,
-          });
-        }
-        return activePath;
-      };
+      if (currentQueryParams.team_id !== API_ALL_TEAMS_ID) {
+        path = getPathWithQueryParams(path, {
+          team_id: currentQueryParams.team_id,
+        });
+      }
 
       // Clicking an active link returns user to default page
       // Resetting all filters except team ID
@@ -183,14 +180,14 @@ const SiteTopNav = ({
       // replace to the same url, which triggers a re-render)
       return (
         <li className={navItemClasses} key={`nav-item-${name}`}>
-          <a className={`${navItemBaseClass}__link`} href={includeTeamId(path)}>
+          <Link to={path} className={`${navItemBaseClass}__link`}>
             <span
               className={`${navItemBaseClass}__name`}
               data-text={navItem.name}
             >
               {name}
             </span>
-          </a>
+          </Link>
         </li>
       );
     }