chore(examples): Update active-class-name example (#43581)

I updated the `active-class-name` example to stop using the legacy behavior.

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

examples/active-class-name/components/ActiveLink.tsx

@@ -1,22 +1,20 @@
 import { useRouter } from 'next/router'
 import Link, { LinkProps } from 'next/link'
-import React, { useState, useEffect, ReactElement, Children } from 'react'
+import React, { PropsWithChildren, useState, useEffect } from 'react'
 
 type ActiveLinkProps = LinkProps & {
-  children: ReactElement
+  className?: string
   activeClassName: string
 }
 
 const ActiveLink = ({
   children,
   activeClassName,
+  className,
   ...props
-}: ActiveLinkProps) => {
+}: PropsWithChildren<ActiveLinkProps>) => {
   const { asPath, isReady } = useRouter()
-
-  const child = Children.only(children)
-  const childClassName = child.props.className || ''
-  const [className, setClassName] = useState(childClassName)
+  const [computedClassName, setComputedClassName] = useState(className)
 
   useEffect(() => {
     // Check if the router fields are updated client-side
@@ -33,29 +31,26 @@ const ActiveLink = ({
 
       const newClassName =
         linkPathname === activePathname
-          ? `${childClassName} ${activeClassName}`.trim()
-          : childClassName
+          ? `${className} ${activeClassName}`.trim()
+          : className
 
-      if (newClassName !== className) {
-        setClassName(newClassName)
+      if (newClassName !== computedClassName) {
+        setComputedClassName(newClassName)
       }
     }
   }, [
     asPath,
     isReady,
     props.as,
     props.href,
-    childClassName,
     activeClassName,
-    setClassName,
     className,
+    computedClassName,
   ])
 
   return (
-    <Link {...props} legacyBehavior>
-      {React.cloneElement(child, {
-        className: className || null,
-      })}
+    <Link className={computedClassName} {...props}>
+      {children}
     </Link>
   )
 }

examples/active-class-name/components/Nav.tsx

@@ -13,23 +13,28 @@ const Nav = () => (
     `}</style>
     <ul className="nav">
       <li>
-        <ActiveLink activeClassName="active" href="/">
-          <a className="nav-link">Home</a>
+        <ActiveLink activeClassName="active" className="nav-link" href="/">
+          Home
         </ActiveLink>
       </li>
       <li>
-        <ActiveLink activeClassName="active" href="/about">
-          <a className="nav-link">About</a>
+        <ActiveLink activeClassName="active" className="nav-link" href="/about">
+          About
         </ActiveLink>
       </li>
       <li>
-        <ActiveLink activeClassName="active" href="/blog">
-          <a className="nav-link">Blog</a>
+        <ActiveLink activeClassName="active" className="nav-link" href="/blog">
+          Blog
         </ActiveLink>
       </li>
       <li>
-        <ActiveLink activeClassName="active" href="/[slug]" as="/dynamic-route">
-          <a className="nav-link">Dynamic Route</a>
+        <ActiveLink
+          activeClassName="active"
+          className="nav-link"
+          href="/[slug]"
+          as="/dynamic-route"
+        >
+          Dynamic Route
         </ActiveLink>
       </li>
     </ul>