Refactor active-class-name example (vercel#8558)

- use router hook instead of hoc
- simplify ActiveLink component
- add prop-types
- add function names
- use fragments instead of divs

Author: HaNdTriX

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

@@ -0,0 +1,22 @@
+import { useRouter } from 'next/router'
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+import React, { Children } from 'react'
+
+const ActiveLink = ({ children, activeClassName, ...props }) => {
+  const { pathname } = useRouter()
+  const child = Children.only(children)
+
+  const className =
+    pathname === props.href
+      ? `${child.props.className} ${activeClassName}`
+      : child.props.className
+
+  return <Link {...props}>{React.cloneElement(child, { className })}</Link>
+}
+
+ActiveLink.propTypes = {
+  activeClassName: PropTypes.string.isRequired
+}
+
+export default ActiveLink

examples/active-class-name/components/Link.js

@@ -1,30 +1,29 @@
-import Link from './Link'
+import ActiveLink from './ActiveLink'
 
-export default () => (
+const Nav = () => (
   <nav>
     <style jsx>{`
-      .active:after {
-        content: ' (current page)';
-      }
-
       .nav-link {
         text-decoration: none;
-        padding: 10px;
-        display: block;
       }
-    `}</style>
 
-    <ul>
+      .active:after {
+        content: ' (current page)';
+      }
+    `}</style>
+    <ul className='nav'>
       <li>
-        <Link activeClassName='active' href='/'>
-          <a className='nav-link home-link'>Home</a>
-        </Link>
+        <ActiveLink activeClassName='active' href='/'>
+          <a className='nav-link'>Home</a>
+        </ActiveLink>
       </li>
       <li>
-        <Link activeClassName='active' href='/about'>
+        <ActiveLink activeClassName='active' href='/about'>
           <a className='nav-link'>About</a>
-        </Link>
+        </ActiveLink>
       </li>
     </ul>
   </nav>
 )
+
+export default Nav

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

@@ -1,8 +1,10 @@
 import Nav from '../components/Nav'
 
-export default () => (
-  <div>
+const AboutPage = () => (
+  <>
     <Nav />
-    <p>Hello, I'm About.js</p>
-  </div>
+    <p>Hello, I'm the about page</p>
+  </>
 )
+
+export default AboutPage

examples/active-class-name/pages/about.js

@@ -1,8 +1,10 @@
 import Nav from '../components/Nav'
 
-export default () => (
-  <div>
+const IndexPage = () => (
+  <>
     <Nav />
-    <p>Hello, I'm the home page</p>
-  </div>
+    <p>Hello, I'm the index page</p>
+  </>
 )
+
+export default IndexPage