fix: revert navlink back to prior approach (#9497)

* fix: revert navlink back to prior approach * add changeset
remix-run · Oct 27, 2022 · 046239f · 046239f
1 parent e50b937
commit 046239f
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 16 deletions.
diff --git a/.changeset/unlucky-hats-play.md 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
@@ -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(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route index element={<h1>Root</h1>} />
+              <Route
+                path="home"
+                element={<NavLink to="/">Root</NavLink>}
+              ></Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      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(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route
+                path="/"
+                element={
+                  <>
+                    <h1>Root</h1>
+                    <Outlet />
+                  </>
+                }
+              >
+                <Route
+                  path="home"
+                  element={<NavLink to="/">Root</NavLink>}
+                ></Route>
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      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
@@ -442,24 +442,36 @@ export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
     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;