如何根据当前 url 使 antd 侧边栏菜单项处于活动状态？

Question

我正在使用 antd 菜单和菜单项组件。我的应用程序是这样的，如果您单击特定的菜单项，则 url 会发生变化并且该菜单项会被选中。但是，如果您在仪表板上，您还可以单击一个按钮，将 URL 更改为与单击该特定菜单项时相同的 URL，但在这种情况下，该菜单项不会被选中。如何解决这个问题：

              <Menu
                onClick={this.handleClick}
                mode="vertical"
              >
                <Link to="/dashboard">
                   <Menu.Item key="mail" icon={<MailOutlined />}>
                     Dashboard
                   </Menu.Item>
                 </Link>
                <Link to="/add-recipe">
                   <Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
                     Add Recipes
                   </Menu.Item>
                 </Link>
              </Menu>

现在，在仪表板组件中还有一个按钮，允许用户直接从那里添加菜谱并在单击时更改 url，但不会选择“添加菜谱”菜单项，因为它不是手动单击的。如何根据 url 使其激活？

Answer 1

我遇到了同样的问题，我必须使用 propsselectedKeys并Menu使用 hooks 和 state 来设置当前选定的项目。为了使其工作，键必须具有与链接相同的值。

例子 ：

function Navigation() {
    let location = useLocation();
    const [current, setCurrent] = useState(
        location.pathname === "/" || location.pathname === ""
            ? "/dashboard"
            : location.pathname,
    );
    //or simply use const [current, setCurrent] = useState(location.pathname)        

    useEffect(() => {
        if (location) {
            if( current !== location.pathname ) {
                setCurrent(location.pathname);
            }
        }
    }, [location, current]);

    function handleClick(e: any) {
        setCurrent(e.key);
    }

    return (
        <Menu
            onClick={handleClick}
            mode="vertical"
            selectedKeys={[current]}
          >
            <Link to="/dashboard">
               <Menu.Item key="/dashboard" icon={<MailOutlined />}>
                 Dashboard
               </Menu.Item>
             </Link>
            <Link to="/add-recipe">
               <Menu.Item key="/add-recipe" disabled icon={<AppstoreOutlined />}>
                 Add Recipes
               </Menu.Item>
             </Link>
          </Menu>
    );
}

export default Navigation;