当前位置：首页 > news >正文

next.js刷新页面时二级菜单展开状态判断

news 2025/7/22 16:01:27

在 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天});};// 渲染逻辑
};