Support sensitive matchPath option in NavLink (#7251)

* Support `sensitive` matchPath option in NavLink * Add NavLink sensitive prop tests
remix-run · Apr 12, 2020 · 291bfd0 · 291bfd0
1 parent 402ecab
commit 291bfd0
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 0 deletions.
diff --git a/packages/react-router-dom/modules/NavLink.js b/packages/react-router-dom/modules/NavLink.js
@@ -32,6 +32,7 @@ const NavLink = forwardRef(
       exact,
       isActive: isActiveProp,
       location: locationProp,
+      sensitive,
       strict,
       style: styleProp,
       to,
@@ -59,6 +60,7 @@ const NavLink = forwardRef(
             ? matchPath(currentLocation.pathname, {
                 path: escapedPath,
                 exact,
+                sensitive,
                 strict
               })
             : null;
@@ -114,6 +116,7 @@ if (__DEV__) {
     exact: PropTypes.bool,
     isActive: PropTypes.func,
     location: PropTypes.object,
+    sensitive: PropTypes.bool,
     strict: PropTypes.bool,
     style: PropTypes.object
   };

diff --git a/packages/react-router-dom/modules/__tests__/NavLink-test.js b/packages/react-router-dom/modules/__tests__/NavLink-test.js
@@ -490,6 +490,68 @@ describe("A <NavLink>", () => {
     });
   });
 
+  describe("with `sensitive=true`", () => {
+    it("applies default activeClassName for sensitive matches", () => {
+      renderStrict(
+        <MemoryRouter initialEntries={["/pizza"]}>
+          <NavLink sensitive to="/pizza">
+            Pizza!
+          </NavLink>
+        </MemoryRouter>,
+        node
+      );
+
+      const a = node.querySelector("a");
+
+      expect(a.className).toContain("active");
+    });
+
+    it("does not apply default activeClassName for non-sensitive matches", () => {
+      renderStrict(
+        <MemoryRouter initialEntries={["/PIZZA"]}>
+          <NavLink sensitive to="/pizza">
+            Pizza!
+          </NavLink>
+        </MemoryRouter>,
+        node
+      );
+
+      const a = node.querySelector("a");
+
+      expect(a.className).not.toContain("active");
+    });
+
+    it("applies custom activeClassName for sensitive matches", () => {
+      renderStrict(
+        <MemoryRouter initialEntries={["/pizza"]}>
+          <NavLink sensitive to="/pizza" activeClassName="selected">
+            Pizza!
+          </NavLink>
+        </MemoryRouter>,
+        node
+      );
+
+      const a = node.querySelector("a");
+
+      expect(a.className).toContain("selected");
+    });
+
+    it("does not apply custom activeClassName for non-sensitive matches", () => {
+      renderStrict(
+        <MemoryRouter initialEntries={["/pizza"]}>
+          <NavLink sensitive to="/PIZZA" activeClassName="selected">
+            Pizza!
+          </NavLink>
+        </MemoryRouter>,
+        node
+      );
+
+      const a = node.querySelector("a");
+
+      expect(a.className).not.toContain("selected");
+    });
+  });
+
   describe("the `location` prop", () => {
     it("overrides the current location", () => {
       renderStrict(