React-Bootstrap中Dropdown.Item作为Link时className失效的解决方法

以下是几种符合React规范的可行方案：

方法一：显式传递className并确保类名生效 #

React-Bootstrap的Dropdown.Item使用as={Link}时，会将props传递给Link组件。若自定义className未生效，可直接指定完整类名，或通过bsPrefix强制锁定基础类：

// 直接传递className
<Dropdown.Item as={Link} href="/example" className="dropdown-item">
  Example
</Dropdown.Item>

// 若上述方式无效，用bsPrefix强制设置类名
<Dropdown.Item as={Link} href="/example" bsPrefix="dropdown-item">
  Example
</Dropdown.Item>

方法二：嵌套Link并处理事件冲突 #

在Dropdown.Item内部嵌套Link组件，手动添加类名，同时通过阻止事件冒泡避免Dropdown折叠与Link跳转的冲突：

<Dropdown.Item onClick={(e) => e.stopPropagation()}>
  <Link to="/example" className="dropdown-item">
    Example
  </Link>
</Dropdown.Item>

方法三：编程式导航替代Link组件 #

借助React Router的useNavigate钩子实现跳转，直接给Dropdown.Item添加类名和点击事件：

import { useNavigate } from 'react-router-dom';

// 在组件内获取导航函数
const navigate = useNavigate();

// 渲染下拉项
<Dropdown.Item 
  className="dropdown-item"
  onClick={() => navigate('/example')}
>
  Example
</Dropdown.Item>

内容的提问来源于stack exchange，提问作者E. Boussardon