Use useLocation instead of window.location

Should fix re-rendering of `NavBar` when navigating to other pages.
kiesraad · Feb 3, 2025 · 3a87701 · 3a87701
1 parent 96d2e95
commit 3a87701
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 9 deletions.
diff --git a/frontend/app/component/navbar/NavBar.tsx b/frontend/app/component/navbar/NavBar.tsx
@@ -4,9 +4,9 @@ import { IconUser } from "@kiesraad/icon";
 import styles from "./NavBar.module.css";
 import { NavBarLinks } from "./NavBarLinks";
 
-type NavBarProps = { location?: { pathname: string; hash: string } };
+type NavBarProps = { location: { pathname: string; hash: string } };
 
-export function NavBar({ location = window.location }: NavBarProps) {
+export function NavBar({ location }: NavBarProps) {
   const isAdministrator = location.hash.includes("administrator");
   const isCoordinator = location.hash.includes("coordinator");
 

diff --git a/frontend/app/module/AdministratorLayout.tsx b/frontend/app/module/AdministratorLayout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from "react-router";
+import { Outlet, useLocation } from "react-router";
 
 import { Footer } from "app/component/footer/Footer";
 
@@ -7,9 +7,10 @@ import { AppLayout } from "@kiesraad/ui";
 import { NavBar } from "../component/navbar/NavBar";
 
 export function AdministratorLayout() {
+  const location = useLocation();
   return (
     <AppLayout>
-      <NavBar />
+      <NavBar location={location} />
       <Outlet />
       <Footer />
     </AppLayout>

diff --git a/frontend/app/module/account/LoginLayout.tsx b/frontend/app/module/account/LoginLayout.tsx
@@ -1,13 +1,15 @@
-import { Outlet } from "react-router";
+import { Outlet, useLocation } from "react-router";
 
 import { NavBar } from "app/component/navbar/NavBar";
 
 import { AppLayout } from "@kiesraad/ui";
 
 export function LoginLayout() {
+  const location = useLocation();
+
   return (
     <AppLayout>
-      <NavBar />
+      <NavBar location={location} />
       <Outlet />
     </AppLayout>
   );

diff --git a/frontend/app/module/election/ElectionLayout.tsx b/frontend/app/module/election/ElectionLayout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from "react-router";
+import { Outlet, useLocation } from "react-router";
 
 import { ElectionProvider, ElectionStatusProvider } from "@kiesraad/api";
 import { useNumericParam } from "@kiesraad/util";
@@ -7,11 +7,12 @@ import { NavBar } from "../../component/navbar/NavBar";
 
 export function ElectionLayout() {
   const electionId = useNumericParam("electionId");
+  const location = useLocation();
 
   return (
     <ElectionProvider electionId={electionId}>
       <ElectionStatusProvider electionId={electionId}>
-        <NavBar />
+        <NavBar location={location} />
         <Outlet />
       </ElectionStatusProvider>
     </ElectionProvider>

diff --git a/frontend/app/module/election/page/OverviewPage.tsx b/frontend/app/module/election/page/OverviewPage.tsx
@@ -32,7 +32,7 @@ export function OverviewPage() {
   return (
     <>
       <PageTitle title={`${t("election.title.overview")} - Abacus`} />
-      <NavBar />
+      <NavBar location={location} />
       <header>
         <section>
           <h1>{isAdminOrCoordinator ? t("election.manage") : t("election.title.plural")}</h1>