Next 13+：如何用next/navigation检测客户端路由导航

你遇到的核心问题是：router 是Next.js提供的稳定引用，不会随路由变更而变化，所以把它加入useEffect依赖项不会触发钩子执行。下面给你两种可行的解决思路：

方法一：使用usePathname监听路由变化 #

usePathname会在路由的路径部分变更时返回新的值，把它加入useEffect依赖项，就能在每次路由切换时触发逻辑：

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

// 在你的上下文组件中
const YourContextComponent = () => {
  const router = useRouter();
  const pathname = usePathname();
  const currentLanguage = 'zh-CN'; // 替换为你的实际语言状态

  useEffect(() => {
    // 获取当前URL的搜索参数
    const searchParams = new URLSearchParams(window.location.search);
    // 避免重复更新参数，防止循环导航
    if (searchParams.get('lang') !== currentLanguage) {
      searchParams.set('lang', currentLanguage);
      router.push(`${pathname}?${searchParams.toString()}`);
    }
  }, [pathname, currentLanguage, router]);

  // 其他上下文逻辑...
};

方法二：利用router.events监听导航事件 #

Next.js的路由对象提供了事件监听机制，可以直接监听路由完成事件，在每次导航结束后执行参数更新：

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

const YourContextComponent = () => {
  const router = useRouter();
  const currentLanguage = 'zh-CN'; // 替换为你的实际语言状态

  useEffect(() => {
    const handleRouteChange = (url) => {
      const urlObj = new URL(url, window.location.origin);
      const searchParams = urlObj.searchParams;
      if (searchParams.get('lang') !== currentLanguage) {
        searchParams.set('lang', currentLanguage);
        // 使用replace避免历史记录堆积
        router.replace(`${urlObj.pathname}?${searchParams.toString()}`);
      }
    };

    // 监听路由完成事件
    router.events.on('routeChangeComplete', handleRouteChange);

    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [currentLanguage, router]);

  // 其他上下文逻辑...
};

关键注意点 #

• 必须判断当前参数是否已经符合要求，否则会陷入router.push触发路由变化、路由变化又触发router.push的循环。
• 如果不需要保留重复的路由历史，优先用router.replace代替router.push，优化用户的回退体验。

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