diff --git a/packages/react-router-dom/modules/NavLink.js b/packages/react-router-dom/modules/NavLink.js index ac9ba1bf06..1c3274ceeb 100644 --- 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 index 0b834ddc00..e6e2fb2c95 100644 --- 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 ", () => { }); }); + describe("with `sensitive=true`", () => { + it("applies default activeClassName for sensitive matches", () => { + renderStrict( + + + Pizza! + + , + node + ); + + const a = node.querySelector("a"); + + expect(a.className).toContain("active"); + }); + + it("does not apply default activeClassName for non-sensitive matches", () => { + renderStrict( + + + Pizza! + + , + node + ); + + const a = node.querySelector("a"); + + expect(a.className).not.toContain("active"); + }); + + it("applies custom activeClassName for sensitive matches", () => { + renderStrict( + + + Pizza! + + , + node + ); + + const a = node.querySelector("a"); + + expect(a.className).toContain("selected"); + }); + + it("does not apply custom activeClassName for non-sensitive matches", () => { + renderStrict( + + + Pizza! + + , + node + ); + + const a = node.querySelector("a"); + + expect(a.className).not.toContain("selected"); + }); + }); + describe("the `location` prop", () => { it("overrides the current location", () => { renderStrict(