NextJS：点击菜单Link跳转后强制重置页面初始状态的方法

问题背景 #

我有一个带<Link>的头部菜单，链接指向不同模块页面，示例代码：

<Link href="/module1" key="resourceMenu1">Module 1</Link>

每个模块对应/moduleN/page.tsx文件，页面内通过showSearchFormFlag状态控制<SearchForm>和<ResultsPage>的显示：

{!showSearchFormFlag ? <SearchForm ... /> : <Results .../>}

当用户处于Results状态（showSearchFormFlag为true）时，点击对应菜单的<Link>，由于URL未发生变化，Next.js客户端路由不会重新加载页面，导致页面停留在Results状态，无法自动回到初始的SearchForm（手动刷新可恢复）。要求不能给每个Link添加onClick调用window.location.href（会绕过Next.js机制），也不能使用查询参数（需保持URL不变）。

可行方案 #

方案1：结合router.refresh()处理同URL跳转 #

使用Next.js官方提供的router.refresh()方法，仅在点击同URL的菜单链接时触发页面状态重置，不影响正常的客户端路由逻辑。

在菜单组件中实现：

import { useRouter } from 'next/navigation';
import Link from 'next/link';

const Menu = () => {
  const router = useRouter();

  const handleSameUrlClick = (e, targetHref) => {
    if (window.location.pathname === targetHref) {
      e.preventDefault();
      router.refresh();
    }
  };

  return (
    <nav>
      <Link 
        href="/module1" 
        key="resourceMenu1"
        onClick={(e) => handleSameUrlClick(e, "/module1")}
      >
        Module 1
      </Link>
      <Link 
        href="/module2" 
        key="resourceMenu2"
        onClick={(e) => handleSameUrlClick(e, "/module2")}
      >
        Module 2
      </Link>
    </nav>
  );
};

export default Menu;

router.refresh()会重新获取服务器组件数据，同时重置客户端组件的状态，且不会刷新整个页面，完全遵循Next.js的路由机制。

方案2：页面内监听路由事件自动重置状态 #

在模块页面组件中，监听Next.js的路由完成事件，只要路由发生变化（包括同URL跳转触发的路由事件），就自动重置showSearchFormFlag状态。

在/moduleN/page.tsx中实现：

'use client';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import SearchForm from './SearchForm';
import Results from './Results';

export default function ModulePage() {
  const [showSearchFormFlag, setShowSearchFormFlag] = useState(false);
  const router = useRouter();

  useEffect(() => {
    const resetSearchState = () => {
      setShowSearchFormFlag(false);
    };

    router.events.on('routeChangeComplete', resetSearchState);

    return () => {
      router.events.off('routeChangeComplete', resetSearchState);
    };
  }, [router]);

  return (
    <div className="module-page">
      {!showSearchFormFlag ? <SearchForm /> : <Results />}
    </div>
  );
}

此方案无需修改菜单组件，页面会自动在路由操作后重置状态，适用于所有模块页面的统一处理。

内容的提问来源于stack exchange，提问作者gene b.