如何使用 React Router {pathname} 在 ANTD 的单独组件中突出显示两个 Menu.Item

Question

我正在尝试在我的应用程序中创建导航。我正在使用 Antd 和 React 路由器。我创建了 Menu 组件，它呈现并 returns 一个完整的 Menu。有一个属性：selectedKeys 和defaultSelectedKeys。所以它在我的两个菜单上都工作正常，一个通过这样的路线导航：

/x
/y
/z <- redirect to /z/a
..

第二个像这样：

/z/a
/z/b
/z/c

所以当我点击 /y route Antd 选择的键将是 /y route 并突出显示菜单项，当我点击 /z/b 时，菜单中的 /z/b 项目将突出显示，但是我还想突出显示父路由菜单项 /z。我要呈现菜单的组件：

const menuItems = routes.map(({ name, path }) => (
    <Menu.Item key={path}>
      <Link to={path}>{name}</Link>
    </Menu.Item>
  ));
  return (
    <Menu
      theme={theme}
      mode={mode}
      {...items}
    >
      { menuItems}
    </Menu>
  );

和用法：

主菜单/:

<MenuItems routes={mainRoutes}  />

子菜单/z :

<MenuItems routes={subRoutes}  />

主子路线实现：

const mainRoutes= [
 {
    path: '/x',
    name: 'x',
    component: ...,
  },  {
    path: '/y',
    name: 'y',
    component: ...,
  },
  {
    path: '/z',
    name: 'z',
    component: ...,
  },
];
const subRoutes = [
  {
    path: /z/a.,
    name: 'z a',
    component: ...,
  },
  {
    path: /z/b,
    name: 'z b',
    component: ...,
  },
 
];

Answer 1

在Ant Design的Menu组件中，您可以使用selectedKeys属性来指定您关联的路由。访问 here 了解更多信息。

// ...
function SideBar(){
   // ...
   const location = useLocation();

   const getAssociatedPaths = () => {
       if(mainRoutes.find(route => route.path === location.pathname)){
           return null; // matched with main route
       }
       
       const firstSlug = location?.pathname.split("/")[0];
       const matchedMainRoute = mainRoutes.find(route => route.path.slice(1) === firstSlug);

       if(matchedMainRoute) return [ matchedMainRoute.path, location.pathname ];

       return null;
   }

   return (
       <Menu
           theme={theme}
           mode={mode}
           selectedKeys={getAssociatedPaths()}
           {...items}
       >
           { menuItems}
       </Menu>
   );

}

但是，如果您在 mainRoutes 中声明 sub-routes，那将是一个很好的方法。因此，您可以轻松识别您的 parent route/path.

如何使用 React Router {pathname} 在 ANTD 的单独组件中突出显示两个 Menu.Item

How to highlight two Menu.Item each in separate component in ANTD with React Router {pathname}

reactjs

react-router

antd