Next.js导航与路由

在Next.js中，我们可以使用next/link来实现页面的导航，以及利用next/router来处理路由级别的操作。

例如，我们可以创建一个NavLink组件，用于在不同页面间提供导航功能：

import Link from 'next/link';
import React from 'react';
 
const NavLink = ({ href, children }) => (
  <Link href={href}>
    <a>
      {children}
      <style jsx>{`
        a {
          margin-right: 15px;
          text-decoration: none;
          color: blue;
        }
        a:hover {
          text-decoration: underline;
        }
        a[aria-current='page'] {
          font-weight: bold;
        }
      `}</style>
    </a>
  </Link>
);
 
export default NavLink;

在页面组件中使用这个NavLink组件：

import NavLink from '../components/NavLink';
 
export default function Home() {
  return (
    <div>
      <NavLink href="/">Home</NavLink>
      <NavLink href="/about">About</NavLink>
      <NavLink href="/contact">Contact</NavLink>
    </div>
  );
}

此外，我们可以使用next/router来监听路由变化，并在路由变化时执行一些操作：

import { useRouter } from 'next/router';
import React, { useEffect } from 'react';
 
export default function Page() {
  const router = useRouter();
 
  useEffect(() => {
    const handleRouteChange = (url) => {
      console.log(`Routing to ${url}`);
    };
 
    router.events.on('routeChangeStart', handleRouteChange);
    return () => {
      router.events.off('routeChangeStart', handleRouteChange);
    };
  }, [router.events]);
 
  return <div>Page content</div>;
}

这些代码片段展示了如何在Next.js中创建导航链接和监听路由变化。