Make <NavLink> match only whole URL segments

Fixes #7523
remix-run · Oct 2, 2021 · 3b54be1 · 3b54be1
1 parent 85a45bb
commit 3b54be1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/packages/react-router-dom/__tests__/nav-link-active-test.tsx b/packages/react-router-dom/__tests__/nav-link-active-test.tsx
@@ -98,6 +98,32 @@ describe("NavLink", () => {
     });
   });
 
+  describe("when it matches a partial URL segment", () => {
+    it("does not apply the 'active' className to the underlying <a>", () => {
+      let renderer = createTestRenderer(
+        <Router initialEntries={["/home/children"]}>
+          <Routes>
+            <Route
+              path="home"
+              element={
+                <div>
+                  <NavLink to="child">Home</NavLink>
+                  <Outlet />
+                </div>
+              }
+            >
+              <Route path="children" element={<div>Child</div>} />
+            </Route>
+          </Routes>
+        </Router>
+      );
+
+      let anchor = renderer.root.findByType("a");
+
+      expect(anchor.props.className).not.toMatch("active");
+    });
+  });
+
   describe("when it matches just the beginning but not to the end", () => {
     it("applies the default 'active' className to the underlying <a>", () => {
       let renderer = createTestRenderer(

diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
@@ -268,9 +268,11 @@ export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
       toPathname = toPathname.toLowerCase();
     }
 
-    let isActive = end
-      ? locationPathname === toPathname
-      : locationPathname.startsWith(toPathname);
+    let isActive =
+      locationPathname === toPathname ||
+      (!end &&
+        locationPathname.startsWith(toPathname) &&
+        locationPathname.charAt(toPathname.length) === "/");
 
     let ariaCurrent = isActive ? ariaCurrentProp : undefined;