From b23d7b503bf6683338755bbc263f3c254a86455f Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Wed, 2 Aug 2023 13:42:49 -0400
Subject: [PATCH] Fix docs on NavLink w.r.t. links to the root route and the
 end prop (#10757)

* Fix docs on NavLink w.r.t. links to the root route and the end prop

* Update
---
 docs/components/nav-link.md                   | 20 +++--------
 .../__tests__/nav-link-active-test.tsx        | 36 +++++++++++++++++++
 2 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/docs/components/nav-link.md b/docs/components/nav-link.md
index 338abfa456..61111fe4b9 100644
--- a/docs/components/nav-link.md
+++ b/docs/components/nav-link.md
@@ -84,22 +84,6 @@ You can pass a render prop as children to customize the content of the `<NavLink
 
 The `end` prop changes the matching logic for the `active` and `pending` states to only match to the "end" of the NavLink's `to` path. If the URL is longer than `to`, it will no longer be considered active.
 
-Without the end prop, this link is always active because every URL matches `/`.
-
-```tsx
-<NavLink to="/">Home</NavLink>
-```
-
-To match the URL "to the end" of `to`, use `end`:
-
-```tsx
-<NavLink to="/" end>
-  Home
-</NavLink>
-```
-
-Now this link will only be active at `"/"`. This works for paths with more segments as well:
-
 | Link                          | URL          | isActive |
 | ----------------------------- | ------------ | -------- |
 | `<NavLink to="/tasks" />`     | `/tasks`     | true     |
@@ -107,6 +91,10 @@ Now this link will only be active at `"/"`. This works for paths with more segme
 | `<NavLink to="/tasks" end />` | `/tasks`     | true     |
 | `<NavLink to="/tasks" end />` | `/tasks/123` | false    |
 
+**A note on links to the root route**
+
+`<NavLink to="/">` is an exceptional case because _every_ URL matches `/`. To avoid this matching every single route by default, it effectively ignores the `end` prop and only matches when you're at the root route.
+
 ## `caseSensitive`
 
 Adding the `caseSensitive` prop changes the matching logic to make it case sensitive.
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 c288f2e548..8e597acc48 100644
--- a/packages/react-router-dom/__tests__/nav-link-active-test.tsx
+++ b/packages/react-router-dom/__tests__/nav-link-active-test.tsx
@@ -317,6 +317,42 @@ describe("NavLink", () => {
       expect(anchors.map((a) => a.props.className)).toEqual(["active", ""]);
     });
 
+    it("matches the root route with or without the end prop", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter>
+            <Routes>
+              <Route index element={<NavLink to="/">Root</NavLink>} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      let anchor = renderer.root.findByType("a");
+      expect(anchor.props.className).toMatch("active");
+
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter>
+            <Routes>
+              <Route
+                index
+                element={
+                  <NavLink to="/" end>
+                    Root
+                  </NavLink>
+                }
+              />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      anchor = renderer.root.findByType("a");
+      expect(anchor.props.className).toMatch("active");
+    });
+
     it("does not automatically apply to root non-layout segments", () => {
       let renderer: TestRenderer.ReactTestRenderer;
       TestRenderer.act(() => {