fix: Modify return type of className of NavLinkProps interface (#8542)

`className` may be undefined
remix-run · Jan 4, 2022 · 9bdf8ae · 9bdf8ae
1 parent 02fcd50
commit 9bdf8ae
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git a/contributors.yml b/contributors.yml
@@ -25,3 +25,4 @@
 - turansky
 - underager
 - vijaypushkin
+- koojaa
diff --git 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
@@ -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
@@ -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 {