NavLink - pass currentLocation to isActive prop (#6862) (#6863)

remix-run · Sep 10, 2019 · 1b4329e · 1b4329e
1 parent aac3252
commit 1b4329e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/react-router-dom/modules/NavLink.js b/packages/react-router-dom/modules/NavLink.js
@@ -31,7 +31,6 @@ function NavLink({
         invariant(context, "You should not use <NavLink> outside a <Router>");
 
         const currentLocation = locationProp || context.location;
-        const { pathname: pathToMatch } = currentLocation;
         const toLocation = normalizeToLocation(
           resolveToLocation(to, currentLocation),
           currentLocation
@@ -42,10 +41,10 @@ function NavLink({
           path && path.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
 
         const match = escapedPath
-          ? matchPath(pathToMatch, { path: escapedPath, exact, strict })
+          ? matchPath(currentLocation.pathname, { path: escapedPath, exact, strict })
           : null;
         const isActive = !!(isActiveProp
-          ? isActiveProp(match, context.location)
+          ? isActiveProp(match, currentLocation)
           : match);
 
         const className = isActive

diff --git a/packages/react-router-dom/modules/__tests__/NavLink-test.js b/packages/react-router-dom/modules/__tests__/NavLink-test.js
@@ -487,6 +487,21 @@ describe("A <NavLink>", () => {
       expect(a.className).toContain("active");
     });
 
+    it("overrides the current location for isActive", () => {
+      renderStrict(
+        <MemoryRouter initialEntries={["/pizza"]}>
+          <NavLink to="/pasta" isActive={(_, location) => location.pathname === '/pasta'} location={{ pathname: "/pasta" }}>
+            Pasta!
+          </NavLink>
+        </MemoryRouter>,
+        node
+      );
+
+      const a = node.querySelector("a");
+
+      expect(a.className).toContain("active");
+    });
+
     it("is passed as an argument to function `to` prop", () => {
       renderStrict(
         <MemoryRouter initialEntries={["/pizza"]}>