fix: apply NavLink pending state when the to prop has a trailing slash (#15300)

Author: dfedoryshchev

packages/react-router/.changes/patch.navlink-pending-trailing-slash.md

@@ -0,0 +1 @@
+Fix `NavLink` not applying its `pending` state when `to` has a trailing slash

packages/react-router/__tests__/dom/nav-link-active-test.tsx

@@ -696,6 +696,45 @@ describe("NavLink using a data router", () => {
     expect(screen.getByText("Link to Bar").className).toBe("active");
   });
 
+  it("applies the 'pending' className to a NavLink whose 'to' has a trailing slash", async () => {
+    let dfd = createDeferred();
+    let router = createBrowserRouter(
+      createRoutesFromElements(
+        <Route path="/" element={<Layout />}>
+          <Route path="home" element={<Outlet />}>
+            <Route
+              path="child"
+              loader={() => dfd.promise}
+              element={<p>Child page</p>}
+            />
+          </Route>
+        </Route>,
+      ),
+      {
+        window: getWindow("/"),
+      },
+    );
+    render(<RouterProvider router={router} />);
+
+    function Layout() {
+      return (
+        <>
+          <NavLink to="/home/">Home</NavLink>
+          <NavLink to="/home/child">Child</NavLink>
+          <Outlet />
+        </>
+      );
+    }
+
+    expect(screen.getByText("Home").className).toBe("");
+
+    fireEvent.click(screen.getByText("Child"));
+    expect(screen.getByText("Home").className).toBe("pending");
+
+    dfd.resolve(null);
+    await waitFor(() => screen.getByText("Child page"));
+  });
+
   it("applies its className correctly when provided as a function", async () => {
     let dfd = createDeferred();
     let router = createBrowserRouter(

packages/react-router/lib/dom/lib.tsx

@@ -1690,7 +1690,7 @@ export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
       (nextLocationPathname === toPathname ||
         (!end &&
           nextLocationPathname.startsWith(toPathname) &&
-          nextLocationPathname.charAt(toPathname.length) === "/"));
+          nextLocationPathname.charAt(endSlashPosition) === "/"));
 
     let renderProps = {
       isActive,