From ae065a8306ba4e8177d06dd0a1213857ddd08dd4 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Fri, 13 Jun 2025 15:12:57 +0100
Subject: [PATCH 1/2] fix: use react-router link component for navigation

---
 package.json               |  4 ++--
 src/components/nav/Nav.jsx | 12 ++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 4a98bdd..394a7c6 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,8 @@
     "lint:style": "stylelint './**/*.scss'",
     "lint:format": "prettier . --write --ignore-unknown --no-error-on-unmatched-pattern --log-level warn",
     "lint:spell": "cspell lint --quiet \"**\"",
-    "preview:prod": "cross-env NODE_ENV=production node server",
-    "preview": "cross-env NODE_ENV=local node server",
+    "preview:prod": "cross-env NODE_ENV=production node src/server.js",
+    "preview": "cross-env NODE_ENV=local node src/server.js",
     "test": "vitest run --coverage",
     "test:watch": "vitest --watch",
     "prepare": "husky"
diff --git a/src/components/nav/Nav.jsx b/src/components/nav/Nav.jsx
index ce0b5d6..0d94bff 100644
--- a/src/components/nav/Nav.jsx
+++ b/src/components/nav/Nav.jsx
@@ -30,8 +30,10 @@ import {
   Search,
   Switcher as SwitcherIcon,
 } from '@carbon/icons-react';
+import { useLocation, Link } from 'react-router';
 
 export const Nav = () => {
+  const location = useLocation();
   const [isSideNavExpanded, setIsSideNavExpanded] = useState(false);
 
   const toggleNav = () => {
@@ -51,11 +53,17 @@ export const Nav = () => {
           isActive={isSideNavExpanded}
           aria-expanded={isSideNavExpanded}
         />
-        <HeaderName href="/" prefix="Carbon">
+        <HeaderName as={Link} to="/" prefix="Carbon">
           React starter template
         </HeaderName>
         <HeaderNavigation aria-label="fed-at-ibm">
-          <HeaderMenuItem href="/dashboard">Dashboard</HeaderMenuItem>
+          <HeaderMenuItem
+            as={Link}
+            to="/dashboard"
+            isActive={location.pathname === '/dashboard'}
+          >
+            Dashboard Dashboard
+          </HeaderMenuItem>
           <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
           <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
           <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">

From da8d0e331ce375715ad8709b682cd4735478aea0 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Fri, 13 Jun 2025 16:28:18 +0100
Subject: [PATCH 2/2] fix: remove duplication of dashboard label

---
 src/components/nav/Nav.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/nav/Nav.jsx b/src/components/nav/Nav.jsx
index 0d94bff..7581802 100644
--- a/src/components/nav/Nav.jsx
+++ b/src/components/nav/Nav.jsx
@@ -62,7 +62,7 @@ export const Nav = () => {
             to="/dashboard"
             isActive={location.pathname === '/dashboard'}
           >
-            Dashboard Dashboard
+            Dashboard
           </HeaderMenuItem>
           <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
           <HeaderMenuItem href="#">Link 3</HeaderMenuItem>