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]}
>
这样就可以在子路由页面,依然可以默认选中一级菜单