antd中 Menu 默认选中样式,匹配不到子路由的解决

Menu默认选中的菜单项通过 defaultSelectedKeys: string[] 设置,他会自动匹配数组中给定的值和Menu.Item中key相同的项,但实际项目中还需要匹配子路由,但antd defaultSelectedKeys中不支持正则,想在处于子路由下时,依然可以默认选中,最后我用了Location对象中保存state的方式实现;

<NavLink
        to={{
            pathname: path,
            state: {key:value},
          }}
        >
history.push({ pathname: path, state: {key:value}});

这个地方的state就可以保存我们的一级路由地址,比如:{homePath: '/main/index'}
这样后,我们在history中的location对象中的state属性,就可以找到我们保存的值,
然后就可以在Menu的defaultSelectedKeys中放入从location中state拿到的homePath来匹配一级路由;

const homePath = (this.props.location as any)?.state?.homePath || undefined;
···
<Menu
     defaultSelectedKeys={[pathname, homePath]}
>

这样就可以在子路由页面,依然可以默认选中一级菜单

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容