From 046239f565f3f131b29bbbad96fc6f2a08effe7c Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Thu, 27 Oct 2022 17:46:11 -0400 Subject: [PATCH] fix: revert navlink back to prior approach (#9497) * fix: revert navlink back to prior approach * add changeset --- .changeset/unlucky-hats-play.md | 5 ++ .../__tests__/nav-link-active-test.tsx | 51 +++++++++++++++++++ packages/react-router-dom/index.tsx | 44 ++++++++++------ 3 files changed, 84 insertions(+), 16 deletions(-) create mode 100644 .changeset/unlucky-hats-play.md diff --git a/.changeset/unlucky-hats-play.md b/.changeset/unlucky-hats-play.md new file mode 100644 index 0000000000..7ccf2de7c4 --- /dev/null +++ b/.changeset/unlucky-hats-play.md @@ -0,0 +1,5 @@ +--- +"react-router-dom": patch +--- + +Fix NavLink behavior for root urls diff --git a/packages/react-router-dom/__tests__/nav-link-active-test.tsx b/packages/react-router-dom/__tests__/nav-link-active-test.tsx index 8b9da3c449..4e00e30fee 100644 --- a/packages/react-router-dom/__tests__/nav-link-active-test.tsx +++ b/packages/react-router-dom/__tests__/nav-link-active-test.tsx @@ -288,6 +288,57 @@ describe("NavLink", () => { expect(anchors.map((a) => a.props.className)).toEqual(["active", ""]); }); + + it("does not automatically apply to root non-layout segments", () => { + let renderer: TestRenderer.ReactTestRenderer; + TestRenderer.act(() => { + renderer = TestRenderer.create( + + + Root} /> + Root} + > + + + ); + }); + + let anchor = renderer.root.findByType("a"); + + expect(anchor.props.className).not.toMatch("active"); + }); + + it("does not automatically apply to root layout segments", () => { + let renderer: TestRenderer.ReactTestRenderer; + TestRenderer.act(() => { + renderer = TestRenderer.create( + + + +

Root

+ + + } + > + Root} + > +
+
+
+ ); + }); + + 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", () => { diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx index 9c1e46fda3..6cd01dc86f 100644 --- a/packages/react-router-dom/index.tsx +++ b/packages/react-router-dom/index.tsx @@ -442,24 +442,36 @@ export const NavLink = React.forwardRef( ref ) { let path = useResolvedPath(to, { relative: rest.relative }); - let match = useMatch({ path: path.pathname, end, caseSensitive }); - + let location = useLocation(); let routerState = React.useContext(DataRouterStateContext); - let nextLocation = routerState?.navigation.location; - let nextPath = useResolvedPath(nextLocation || ""); - let nextMatch = React.useMemo( - () => - nextLocation - ? matchPath( - { path: path.pathname, end, caseSensitive }, - nextPath.pathname - ) - : null, - [nextLocation, path.pathname, caseSensitive, end, nextPath.pathname] - ); - let isPending = nextMatch != null; - let isActive = match != null; + let toPathname = path.pathname; + let locationPathname = location.pathname; + let nextLocationPathname = + routerState && routerState.navigation && routerState.navigation.location + ? routerState.navigation.location.pathname + : null; + + if (!caseSensitive) { + locationPathname = locationPathname.toLowerCase(); + nextLocationPathname = nextLocationPathname + ? nextLocationPathname.toLowerCase() + : null; + toPathname = toPathname.toLowerCase(); + } + + let isActive = + locationPathname === toPathname || + (!end && + locationPathname.startsWith(toPathname) && + locationPathname.charAt(toPathname.length) === "/"); + + let isPending = + nextLocationPathname != null && + (nextLocationPathname === toPathname || + (!end && + nextLocationPathname.startsWith(toPathname) && + nextLocationPathname.charAt(toPathname.length) === "/")); let ariaCurrent = isActive ? ariaCurrentProp : undefined;