Question

以下情况：

带有{LOGO-AntMenu [Horizontal]-其他内容}的顶部菜单。

徽标重定向到首页，而每个Menu.Item重定向到应用程序的另一页。

当前行为：如果我单击Menu.Item之一，则会正确激活相对路径（我使用了React-Router链接），并且将“活动”效果应用于相关的Menu.Item。

但是，如果在此之后单击LOGO，则“活动”效果仍保留在先前选择的项目上，并且我无法找到以编程方式将其删除而不破坏菜单的方法。

我尝试将Menu.selectedKeys数组设置为null或其他内容，但它会中断并且看不到the doc上的其他任何有帮助的属性。

有什么想法吗？

Answer 1

根据您的问题，我不确定您如何导航到其他路线。如果您使用的是来自'react-router-dom'的链接。只需将其更改为来自蚂蚁设计的锚链接即可。

import { Anchor  } from 'antd';
const { Link } = Anchor;

内部课程

<Anchor>
     <Link href="/home"  title="Click on Logo">
     </Link>
</Anchor>

如果您需要“ react-router-dom”中的链接用于同一组件，只需使用别名并将其名称更改为其他名称，然后将其用于菜单项进行导航。

Answer 2

最好从您的项目中发布一些代码。

我使用了react redux和react-router-dom，所以也许您会有不同的代码，但希望对您有所帮助。

export const Path = {
root: '/',  
books: '/books',
authors: '/authors'
}

...
<Router>
    <div>
      <ul>
        <li><Link to='/'>   
                <div> 
                   <img src={your logo} />
                </div>
             </Link>
        </li>      
        <li><Link to='/books'>Books</Link></li>
        <li><Link to='/authors'>Authors</Link></li>
      </ul>
      <main>
        <Route exact path={Path.root}/>
        <Route path={Path.books} component={BooksTableContainer}/> 
        <Route path={Path.authors} component={AuthorTableContainer}/>            
      </main>
    </div>
  </Router>

蚂蚁设计-以编程方式从Menu.Item取消选择/删除活动状态

2 个答案: