Update examples/active-class-name

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

@@ -1,20 +1,46 @@
+import { useState, useEffect } from 'react'
 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 { asPath } = useRouter()
+  const { asPath, isReady } = useRouter()
+
   const child = Children.only(children)
   const childClassName = child.props.className || ''
+  const [className, setClassName] = useState(childClassName)
+
+  useEffect(() => {
+    // Check if the router fields are updated client-side
+    if (isReady) {
+      // Dynamic route will be matched via props.as
+      // Static route will be matched via props.href
+      const linkPathname = new URL(props.as || props.href, location.href)
+        .pathname
+
+      // Using URL().pathname to get rid of query and hash
+      const activePathname = new URL(asPath, location.href).pathname
+
+      const newClassName =
+        linkPathname === activePathname
+          ? `${childClassName} ${activeClassName}`.trim()
+          : childClassName
 
-  // pages/index.js will be matched via props.href
-  // pages/about.js will be matched via props.href
-  // pages/[slug].js will be matched via props.as
-  const className =
-    asPath === props.href || asPath === props.as
-      ? `${childClassName} ${activeClassName}`.trim()
-      : childClassName
+      if (newClassName !== className) {
+        setClassName(newClassName)
+      }
+    }
+  }, [
+    asPath,
+    isReady,
+    props.as,
+    props.href,
+    childClassName,
+    activeClassName,
+    setClassName,
+    className,
+  ])
 
   return (
     <Link {...props}>

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

@@ -22,6 +22,11 @@ const Nav = () => (
           <a className="nav-link">About</a>
         </ActiveLink>
       </li>
+      <li>
+        <ActiveLink activeClassName="active" href="/blog">
+          <a className="nav-link">Blog</a>
+        </ActiveLink>
+      </li>
       <li>
         <ActiveLink activeClassName="active" href="/[slug]" as="/dynamic-route">
           <a className="nav-link">Dynamic Route</a>

examples/active-class-name/next.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/blog',
+        destination: '/news',
+      },
+    ]
+  },
+}

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

@@ -0,0 +1,10 @@
+import Nav from '../components/Nav'
+
+const News = () => (
+  <>
+    <Nav />
+    <p>Hello, I'm the news page</p>
+  </>
+)
+
+export default News