Next.js 13 App Router全局路由变化捕获方案问询

因为App Router的根layout.js默认是服务器组件，没法直接使用客户端钩子，下面是两种可行的实现方案：

方案1：全局客户端嵌套布局（推荐） #

在根服务器布局中嵌套一个客户端组件，这个组件会全局挂载，能监听所有路由切换事件。

1. 创建全局客户端布局组件 app/client-layout.js：

'use client';

import { useEffect, useState } from 'react';
import { usePathname } from 'next/navigation';

export default function ClientLayout({ children }) {
  const currentPath = usePathname();
  const [lastPath, setLastPath] = useState(currentPath);

  useEffect(() => {
    // 检测是否离开指定URL
    if (lastPath === '/target-page' && currentPath !== '/target-page') {
      // 这里写你需要执行的处理逻辑
      console.log('已离开目标页面，执行操作');
      // 比如清除临时状态、发送统计请求等
    }
    // 更新上一次记录的路径
    setLastPath(currentPath);
  }, [currentPath, lastPath]);

  return <>{children}</>;
}

2. 在根布局 app/layout.js 中引入这个客户端组件：

import ClientLayout from './client-layout';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <ClientLayout>{children}</ClientLayout>
      </body>
    </html>
  );
}

方案2：兼容浏览器后退/前进操作 #

如果需要处理浏览器原生的后退、前进动作（不止Next.js内部跳转），可以结合useRouter的beforePopState方法：

'use client';

import { useEffect, useState } from 'react';
import { usePathname, useRouter } from 'next/navigation';

export default function ClientLayout({ children }) {
  const currentPath = usePathname();
  const [lastPath, setLastPath] = useState(currentPath);
  const router = useRouter();

  // 监听内部路由跳转
  useEffect(() => {
    if (lastPath === '/target-page' && currentPath !== '/target-page') {
      handleLeaveTarget();
    }
    setLastPath(currentPath);
  }, [currentPath, lastPath]);

  // 监听浏览器后退/前进
  useEffect(() => {
    const handleBackForward = () => {
      if (lastPath === '/target-page') {
        handleLeaveTarget();
      }
      return true; // 允许导航继续
    };

    router.beforePopState(handleBackForward);

    // 组件卸载时清理监听
    return () => {
      router.beforePopState(() => true);
    };
  }, [lastPath, router]);

  // 统一处理离开目标页面的逻辑
  const handleLeaveTarget = () => {
    console.log('离开目标页面，执行处理');
    // 自定义操作：保存表单、清除定时器等
  };

  return <>{children}</>;
}

扩展技巧 #

• 若要监听多个特定URL，可把目标路径存入数组，用includes判断：

const targetPaths = ['/page-a', '/page-b'];
if (targetPaths.includes(lastPath) && !targetPaths.includes(currentPath)) {
  handleLeaveTarget();
}

• 确保所有需要监听路由的组件都加上'use client'指令，否则无法使用客户端钩子。

内容的提问来源于stack exchange，提问作者jamesdlivesinatree