fix: Modify return type of className of NavLinkProps interface

contributors.yml

@@ -24,3 +24,4 @@
 - turansky
 - underager
 - vijaypushkin
+- koojaa

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

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", () => {

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 {