From 9bdf8aea2643b2b743901872c193c29f11c0fd7c Mon Sep 17 00:00:00 2001
From: koojaa <53225921+koojaa@users.noreply.github.com>
Date: Wed, 5 Jan 2022 07:40:19 +0900
Subject: [PATCH] fix: Modify return type of className of NavLinkProps
 interface (#8542)

`className` may be undefined
---
 contributors.yml                              |  1 +
 docs/api.md                                   |  2 +-
 .../__tests__/nav-link-active-test.tsx        | 29 +++++++++++++++++++
 packages/react-router-dom/index.tsx           |  4 +--
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/contributors.yml b/contributors.yml
index 25ce10026..c363337c0 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -25,3 +25,4 @@
 - turansky
 - underager
 - vijaypushkin
+- koojaa
diff --git a/docs/api.md b/docs/api.md
index 056850b49..1f05f9599 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -355,7 +355,7 @@ interface NavLinkProps
     | ((props: { isActive: boolean }) => React.ReactNode);
   className?:
     | string
-    | ((props: { isActive: boolean }) => string);
+    | ((props: { isActive: boolean }) => string | undefined);
   end?: boolean;
   style?:
     | React.CSSProperties
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 6f926536b..458ba92d2 100644
--- a/packages/react-router-dom/__tests__/nav-link-active-test.tsx
+++ b/packages/react-router-dom/__tests__/nav-link-active-test.tsx
@@ -44,6 +44,35 @@ describe("NavLink", () => {
 
       expect(anchor.children[0]).toMatch("Somewhere else");
     });
+
+    it("applies an 'undefined' className to the underlying <a>", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route
+                path="/home"
+                element={
+                  <NavLink
+                    to="somewhere-else"
+                    className={({ isActive }) =>
+                      isActive ? "some-active-classname" : undefined
+                    }
+                  >
+                    Home
+                  </NavLink>
+                }
+              />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      let anchor = renderer.root.findByType("a");
+
+      expect(anchor.props.className).toBeUndefined();
+    });
   });
 
   describe("when it matches to the end", () => {
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
index 4c6041027..40cbe72d2 100644
--- a/packages/react-router-dom/index.tsx
+++ b/packages/react-router-dom/index.tsx
@@ -287,7 +287,7 @@ export interface NavLinkProps
     | React.ReactNode
     | ((props: { isActive: boolean }) => React.ReactNode);
   caseSensitive?: boolean;
-  className?: string | ((props: { isActive: boolean }) => string);
+  className?: string | ((props: { isActive: boolean }) => string | undefined);
   end?: boolean;
   style?:
     | React.CSSProperties
@@ -329,7 +329,7 @@ export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
 
     let ariaCurrent = isActive ? ariaCurrentProp : undefined;
 
-    let className: string;
+    let className: string | undefined;
     if (typeof classNameProp === "function") {
       className = classNameProp({ isActive });
     } else {