计算面包屑显示和解决 Antd 中 Menu 菜单高亮样式丢失问题

最新推荐文章于 2024-04-07 08:06:01 发布

^O一言难尽

最新推荐文章于 2024-04-07 08:06:01 发布

阅读量1.4k

点赞数 1

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_49436239/article/details/127038097

版权

本文探讨了在Antd中遇到的Menu菜单高亮样式丢失问题，特别是刷新页面后样式重置的问题。文章介绍了如何利用react-router-dom的Hooks API，结合useMemo计算属性以及自定义useMenu Hooks来解决这一问题，确保刷新后Menu的高亮和伸缩状态能正确保留，同时展示了如何在Layout的Sider组件中应用这些解决方案。

摘要由CSDN通过智能技术生成

Antd的面包屑组件是一个能够结合路由进行跳转页面的组件，其中对于路由的支持是react-router@3以及react-router@4。

Menu菜单高亮问题

问题描述：ant-design 的 Menu 自带菜单高亮样式。但是，当我们刷新页面时，Menu的高亮样式和伸缩状态会重置。如何解决这个问题呢？

修复目标：当我们刷新网页时，Menu 菜单的高亮样式和伸缩状态可以正常保留，且由当前 url 值所控制。

本篇文章你将学习到以下知识点：

使用 react-router-dom(v5) 中相关的 Hooks API；
计算属性 useMemo() 的使用；
自定义封装 Hooks，实现代码逻辑的封装与复用；
使用 ant-design 的 Menu 组件；
如果可能，你还能学到更多其它知识。

自定义封装 useMenu()

import { useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { asyncRoutes } from '@/views'

// 通过useLocation访问当前url，根据url，在routes路由信息中遍历找到对应的key及其父级的key
export function useMenu () {
  const { pathname } = useLocation(