React页面重载后如何调用setState关闭移动端下拉导航菜单

1. 修复页面重载检测逻辑，确保触发菜单关闭 #

你的空依赖useEffect仅在组件挂载时执行，页面重载时组件会重新挂载，理论上应该触发，但部分浏览器对performance API的支持存在差异，导致检测失效。可以兼容多写法优化重载检测：

修改navigation.jsx中的代码：

useEffect(() => {
  // 兼容新旧浏览器的页面重载判断
  const isReload = 
    window.performance?.getEntriesByType("navigation")?.[0]?.type === "reload" ||
    window.performance?.navigation?.type === 1;

  if (isReload) {
    setOpen(false);
  }
}, []);

2. 路由跳转时自动关闭菜单（解决页面跳转后菜单展开问题） #

你提到跳转页面后菜单仍保持展开，这是路由跳转（非页面重载）时组件未感知路由变化导致的。由于Navigation在BrowserRouter内部，可以用useLocation监听路由变化，触发菜单关闭：

首先在navigation.jsx中引入API：

import { useLocation } from 'react-router-dom';

然后添加监听逻辑：

const location = useLocation();

useEffect(() => {
  // 路由切换时强制关闭菜单
  setOpen(false);
}, [location, setOpen]);

3. 兜底方案：组件挂载时直接关闭菜单 #

如果不需要区分是否为页面重载，只要页面加载就关闭菜单，可以简化逻辑：

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

原代码失效的可能原因 #

• 部分浏览器环境中performance.getEntriesByType("navigation")返回空数组，无法读取重载类型；
• 如果菜单状态存在localStorage等本地存储中，页面重载会读取存储值，需要同时清除对应存储项：

useEffect(() => {
  const isReload = 
    window.performance?.getEntriesByType("navigation")?.[0]?.type === "reload" ||
    window.performance?.navigation?.type === 1;

  if (isReload) {
    setOpen(false);
    localStorage.removeItem('menuOpenState'); // 替换为你实际存储状态的key
  }
}, []);

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