Next.js 13中router方法缺失，路由切换时如何触发状态变更？

方案1：监听路径变化（通用场景） #

利用next/navigation提供的usePathname钩子监听路由路径变化，一旦路径更新就触发组件隐藏逻辑。这是App Router下最直接的应用内导航监听方式，适用于全局组件（如Layout中）或页面内组件。

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

export default function TargetComponent() {
  const [showDiv, setShowDiv] = useState(true);
  const currentPath = usePathname();

  // 每次路径变化时隐藏组件
  useEffect(() => {
    setShowDiv(false);
  }, [currentPath]);

  return (
    <>
      {showDiv && <div className="your-component">需要关闭的内容</div>}
      {/* 其他组件内容 */}
    </>
  );
}

方案2：利用组件卸载清理函数（页面级组件） #

如果目标组件仅存在于单个页面中，可借助React的useEffect清理函数——当页面因导航被卸载时，自动触发组件隐藏逻辑。

'use client';
import { useState, useEffect } from 'react';

export default function PageSpecificComponent() {
  const [showDiv, setShowDiv] = useState(true);

  // 组件卸载时执行（导航到其他页面会触发）
  useEffect(() => {
    return () => {
      setShowDiv(false);
    };
  }, []);

  return (
    <>
      {showDiv && <div className="page-component">页面内需要关闭的内容</div>}
      {/* 页面其他内容 */}
    </>
  );
}

方案3：全局状态管理（跨组件场景） #

如果需要在多个组件间同步"显示/隐藏"状态，可结合React Context封装全局状态，通过路径变化统一更新状态。

1. 创建Context

// app/context/ComponentVisibilityContext.js
'use client';
import { createContext, useContext, useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';

const ComponentVisibilityContext = createContext();

export function VisibilityProvider({ children }) {
  const [showTargetDiv, setShowTargetDiv] = useState(true);
  const currentPath = usePathname();

  useEffect(() => {
    setShowTargetDiv(false);
  }, [currentPath]);

  return (
    <ComponentVisibilityContext.Provider value={{ showTargetDiv, setShowTargetDiv }}>
      {children}
    </ComponentVisibilityContext.Provider>
  );
}

export function useVisibilityContext() {
  return useContext(ComponentVisibilityContext);
}

2. 在Root Layout中挂载Provider

// app/layout.js
import { VisibilityProvider } from './context/ComponentVisibilityContext';

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

3. 在目标组件中使用状态

'use client';
import { useVisibilityContext } from '@/app/context/ComponentVisibilityContext';

export default function GlobalTargetComponent() {
  const { showTargetDiv } = useVisibilityContext();

  return showTargetDiv ? <div className="global-component">全局需要关闭的内容</div> : null;
}

关键注意事项 #

• 所有使用next/navigation钩子的组件必须添加'use client'指令，确保在客户端环境执行。
• 若需区分"首次加载"和"导航变化"，可在useEffect中添加初始路径判断，避免首次加载时隐藏组件。

内容的提问来源于stack exchange，提问作者Before The Empire