Next.js/React.js中浏览器前进后退不更新菜单选中状态求助

实现了一款导航组件，点击菜单可跳转页面并同步切换菜单选中状态，但点击浏览器前进/后退按钮时，菜单的选中状态无法同步更新。

相关截图 #

• 应用运行截图：
  
• 目录结构截图：
  

app/test/layout.tsx 代码 #

'use client';
import Link from 'next/link';
import { useState } from 'react';

const navItems = [
  { name: '首页', path: '/test' },
  { name: '列表', path: '/test/list' },
  { name: '详情', path: '/test/detail' },
];

export default function TestLayout({ children }: { children: React.ReactNode }) {
  const [activePath, setActivePath] = useState('/test');

  const handleNavClick = (path: string) => {
    setActivePath(path);
  };

  return (
    <div>
      <nav>
        {navItems.map(item => (
          <Link
            key={item.path}
            href={item.path}
            onClick={() => handleNavClick(item.path)}
            className={activePath === item.path ? 'active' : ''}
          >
            {item.name}
          </Link>
        ))}
      </nav>
      <main>{children}</main>
    </div>
  );
}

当前只通过菜单的onClick事件更新选中状态，但浏览器前进/后退是直接操作浏览器历史栈，不会触发菜单的点击事件，导致组件内部维护的activePath状态和实际路由路径脱节。

从文件路径判断你用的是Next.js 13+的App Router，以下两种方案都能解决问题：

方案1：用usePathname直接同步路由状态 #

Next.js官方提供的usePathname钩子会自动监听路由变化，直接用它来判断菜单选中状态，不需要手动维护activePath：

'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

const navItems = [
  { name: '首页', path: '/test' },
  { name: '列表', path: '/test/list' },
  { name: '详情', path: '/test/detail' },
];

export default function TestLayout({ children }: { children: React.ReactNode }) {
  // 自动获取当前路由路径，路由变化时自动更新
  const pathname = usePathname();

  return (
    <div>
      <nav>
        {navItems.map(item => (
          <Link
            key={item.path}
            href={item.path}
            // 直接用当前路径判断选中状态
            className={pathname === item.path ? 'active' : ''}
          >
            {item.name}
          </Link>
        ))}
      </nav>
      <main>{children}</main>
    </div>
  );
}

方案2：监听浏览器popstate事件（通用兼容方案） #

如果是普通React项目或者需要兼容更多场景，可以手动监听浏览器的历史栈变化事件，同步更新状态：

'use client';
import Link from 'next/link';
import { useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';

const navItems = [
  { name: '首页', path: '/test' },
  { name: '列表', path: '/test/list' },
  { name: '详情', path: '/test/detail' },
];

export default function TestLayout({ children }: { children: React.ReactNode }) {
  const [activePath, setActivePath] = useState(window.location.pathname);
  const pathname = usePathname();

  useEffect(() => {
    // 监听浏览器前进后退事件
    const handlePopState = () => {
      setActivePath(window.location.pathname);
    };
    window.addEventListener('popstate', handlePopState);

    // 监听Next.js客户端导航的路由变化
    setActivePath(pathname);

    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, [pathname]);

  return (
    <div>
      <nav>
        {navItems.map(item => (
          <Link
            key={item.path}
            href={item.path}
            onClick={() => setActivePath(item.path)}
            className={activePath === item.path ? 'active' : ''}
          >
            {item.name}
          </Link>
        ))}
      </nav>
      <main>{children}</main>
    </div>
  );
}

• 不能只靠菜单点击事件维护选中状态，必须监听实际路由的变化
• Next.js场景优先用官方提供的路由钩子，能自动同步所有路由变化场景（包括浏览器前进后退）
• 通用场景下，结合popstate事件和路由库的导航事件，确保状态和实际路由完全同步

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