Fixed NavLink Issue

contributors.yml

@@ -228,3 +228,4 @@
 - smithki
 - istarkov
 - louis-young
+- bilalk711

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

@@ -397,6 +397,33 @@ describe("NavLink", () => {
       expect(anchor.props.className).toMatch("active");
     });
 
+    it("In case of trailing slash with no further ", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home/child"]}>
+            <Routes>
+              <Route
+                path="home"
+                element={
+                  <div>
+                    <NavLink to="/home/">Home</NavLink>
+                    <Outlet />
+                  </div>
+                }
+              >
+                <Route path="child" element={<div>Child</div>} />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      let anchor = renderer.root.findByType("a");
+
+      expect(anchor.props.className).toMatch("active");
+    });
+
     describe("when end=true", () => {
       it("does not apply the default 'active' className to the underlying <a>", () => {
         let renderer: TestRenderer.ReactTestRenderer;

packages/react-router-dom/index.tsx

@@ -656,12 +656,13 @@ export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
         : null;
       toPathname = toPathname.toLowerCase();
     }
-
+    const endSlashPosition = (toPathname.length > 1 && toPathname[toPathname.length - 1] === "/") ? toPathname.length - 1 : toPathname.length;
     let isActive =
       locationPathname === toPathname ||
       (!end &&
-        locationPathname.startsWith(toPathname) &&
-        locationPathname.charAt(toPathname.length) === "/");
+        locationPathname.startsWith(toPathname) && 
+            locationPathname.charAt(endSlashPosition) === "/" 
+      );
 
     let isPending =
       nextLocationPathname != null &&