Ant Design Pro多子路由对应同一个菜单选中

最新推荐文章于 2025-06-23 16:57:43 发布

原创最新推荐文章于 2025-06-23 16:57:43 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ant design

React_AntD 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在设计用户界面时，实现角色列表页中'新增'按钮点击后跳转到角色设置页面，同时保持'角色管理'菜单项选中，通过布局管理和路由配置来达成导航效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：“角色列表”页里'新增'按钮，是跳到新的路由页面“角色设置”，但菜单还是选中'角色管理'）

{
        name: '角色管理',
        path: '/set/role',
        routes: [
          {
            name: '角色列表',
            path: '/set/role/list',
            component: './set/role',
            hideInMenu: true
          },
          {
            name: '角色设置',
            path: '/set/role/roleSet',            
            component: './set/roleSet',
            hideInMenu: true
          },
          {
            redirect: '/set/role/list', // 父path重定向
          }
        ]
      },

父级只算是个空容器，子级菜单里隐藏，这样不管跳到哪个子路由，菜单都是父级的菜单选中。

思路来源layouts：