Next.js 开发指南 路由篇 | App Router

在Next.js中，自定义\_app.js文件中的App Router可以用来定义全局的路由规则。以下是一个简单的示例：

// _app.js
import { useRouter } from 'next/router';
import '../styles/globals.css';
 
function MyApp({ Component, pageProps }) {
  const router = useRouter();
 
  // 自定义钩子函数，用于路由变化时的处理
  React.useEffect(() => {
    const handleRouteChange = (url) => {
      console.log("当前URL变更为：", url);
    };
 
    // 监听路由变化
    router.events.on('routeChangeStart', handleRouteChange);
    router.events.on('routeChangeComplete', handleRouteChange);
    router.events.on('routeChangeError', handleRouteChange);
 
    // 清理函数，用于取消监听
    return () => {
      router.events.off('routeChangeStart', handleRouteChange);
      router.events.off('routeChangeComplete', handleRouteChange);
      router.events.off('routeChangeError', handleRouteChange);
    };
  }, [router.events]);
 
  return <Component {...pageProps} />;
}
 
export default MyApp;

在这个示例中，我们使用了Next.js的useRouter钩子从next/router模块中获取了路由器实例。然后，我们使用React的useEffect钩子来设置路由变化的事件监听器。当路由开始变化、变化完成或者在变化过程中出现错误时，我们都通过自定义的handleRouteChange函数打印出相关信息。最后，我们在组件卸载前移除事件监听器，以防止内存泄漏。