Fix example active-class-anme: Add support for children of ActiveLink…

… without a className. (#9271) * Fix example active-class-anme: Add support for children of ActiveLink without a className. * Update examples/active-class-name/components/ActiveLink.js Co-Authored-By: Luis Alvarez D. <[email protected]>
vercel · Oct 31, 2019 · 81066a3 · 81066a3
1 parent 37ee8fc
commit 81066a3
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/examples/active-class-name/components/ActiveLink.js b/examples/active-class-name/components/ActiveLink.js
@@ -6,13 +6,20 @@ import React, { Children } from 'react'
 const ActiveLink = ({ children, activeClassName, ...props }) => {
   const { pathname } = useRouter()
   const child = Children.only(children)
+  const childClassName = child.props.className || ''
 
   const className =
     pathname === props.href
-      ? `${child.props.className} ${activeClassName}`
-      : child.props.className
+      ? `${childClassName} ${activeClassName}`.trim()
+      : childClassName
 
-  return <Link {...props}>{React.cloneElement(child, { className })}</Link>
+  return (
+    <Link {...props}>
+      {React.cloneElement(child, {
+        className: className || null
+      })}
+    </Link>
+  )
 }
 
 ActiveLink.propTypes = {