在 Next.js 中保持二级菜单刷新后展开状态的解决方案
在 Next.js 应用中，当页面刷新时保持二级菜单的展开状态，可以通过以下几种方法实现：
方法1：使用 URL 参数保存状态（推荐）
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';const MenuComponent = () => {const router = useRouter();const { query } = router;const [expandedMenu, setExpandedMenu] = useState<string | null>(null);// 从URL参数初始化菜单状态useEffect(() => {if (query.expandedMenu) {setExpandedMenu(query.expandedMenu as string);}}, [query.expandedMenu]);const toggleMenu = (menuId: string) => {const newState = expandedMenu === menuId ? null : menuId;setExpandedMenu(newState);// 更新URL但不触发页面刷新router.push({pathname: router.pathname,query: { ...query, expandedMenu: newState }}, undefined, { shallow: true });};return (<div><div onClick={() => toggleMenu('menu1')}>主菜单1</div>{expandedMenu === 'menu1' && (<div className="submenu"><div>子菜单1</div><div>子菜单2</div></div>)}</div>);
};
方法2：使用 localStorage 保存状态
import { useEffect, useState } from 'react';const MenuComponent = () => {const [expandedMenu, setExpandedMenu] = useState<string | null>(null);// 从localStorage初始化菜单状态useEffect(() => {const savedState = typeof window !== 'undefined' ? localStorage.getItem('expandedMenu') : null;if (savedState) {setExpandedMenu(savedState);}}, []);const toggleMenu = (menuId: string) => {const newState = expandedMenu === menuId ? null : menuId;setExpandedMenu(newState);localStorage.setItem('expandedMenu', newState || '');};// 渲染逻辑同上
};
方法3：使用状态管理库（如 Zustand）
// store/menuStore.ts
import create from 'zustand';
import { persist } from 'zustand/middleware';interface MenuState {expandedMenu: string | null;toggleMenu: (menuId: string) => void;
}export const useMenuStore = create<MenuState>()(persist((set) => ({expandedMenu: null,toggleMenu: (menuId) => set((state) => ({expandedMenu: state.expandedMenu === menuId ? null : menuId})),}),{name: 'menu-storage', // localStorage的key})
);// 组件中使用
const MenuComponent = () => {const { expandedMenu, toggleMenu } = useMenuStore();// 渲染逻辑
};
方法4：使用 Cookie（服务端可获取）
import { useState } from 'react';
import { setCookie, parseCookies } from 'nookies';export const getServerSideProps = (ctx) => {const cookies = parseCookies(ctx);return {props: {initialExpandedMenu: cookies.expandedMenu || null}};
};const MenuComponent = ({ initialExpandedMenu }) => {const [expandedMenu, setExpandedMenu] = useState(initialExpandedMenu);const toggleMenu = (menuId: string) => {const newState = expandedMenu === menuId ? null : menuId;setExpandedMenu(newState);setCookie(null, 'expandedMenu', newState || '', {path: '/',maxAge: 30 * 24 * 60 * 60, // 30天});};// 渲染逻辑
};
最佳实践建议
- 简单场景：使用 URL 参数方法（方法1），既保持状态又方便分享链接
- 复杂应用：使用 Zustand 等状态管理库（方法3），特别是需要跨组件共享状态时
- SEO相关：如果菜单状态影响内容展示，考虑服务端方案（方法4）
- 用户体验：添加过渡动画使菜单展开/收起更平滑
注意事项
- 服务端渲染兼容性：在 useEffect 中访问 localStorage/window 等客户端 API
- 状态同步：确保 URL、存储和组件状态保持一致
- 安全考虑：不要用这些方法存储敏感信息
- 性能优化：对于大型菜单，考虑虚拟滚动等技术
以上方法都可以在 Next.js 应用中有效保持二级菜单的展开状态，即使在页面刷新后也能恢复之前的状态。
