react-bootstrap Nav组件内外部链接如何禁用active激活状态

问题原因 #

你用的是React Bootstrap的Nav组件，该组件默认会基于当前页面地址、eventKey匹配逻辑，自动给对应Nav.Link添加激活状态。你点击外部链接时，组件的点击触发逻辑会误将无明确eventKey的外部链接判定为当前激活项，切回页面时就会出现异常激活的样式。

解决方法 #

下面三个方案按需选择即可：

方案1：强制禁用外部链接的激活状态

直接给外部链接的Nav.Link手动添加active={false}属性，该属性优先级高于组件的默认自动匹配逻辑，能直接禁用激活状态，同时给它配一个专属的eventKey避免和内部路由的key冲突，代码示例：

<Nav defaultActiveKey="1">
  <Nav.Link href="/home" eventKey="1">Home</Nav.Link>
  <Nav.Link 
    href="https://google.com" 
    target="_blank" 
    eventKey="external-google"
    active={false}
  >Google</Nav.Link>
  <Nav.Link href="/service" eventKey="2">Service</Nav.Link>
</Nav>

方案2：封装通用外部导航链接组件

如果项目里有多个外部链接需要放在Nav内，可以封装一个通用组件统一处理逻辑，避免重复写参数：

// 封装组件
const ExternalNavItem = (props) => {
  return <Nav.Link {...props} active={false} target="_blank" rel="noopener noreferrer" />
}

// 业务代码中使用
<Nav defaultActiveKey="1">
  <Nav.Link href="/home" eventKey="1">Home</Nav.Link>
  <ExternalNavItem href="https://google.com">Google</ExternalNavItem>
  <Nav.Link href="/service" eventKey="2">Service</Nav.Link>
</Nav>

方案3：通过CSS覆盖激活样式

如果不想修改JSX逻辑，也可以给外部链接加自定义类名，用CSS强制覆盖激活状态的样式：

// JSX部分添加自定义类
<Nav.Link 
  href="https://google.com" 
  target="_blank" 
  className="nav-external-link"
>Google</Nav.Link>

/* 样式部分重置激活态和普通态一致 */
.nav-link.nav-external-link.active,
.nav-link.nav-external-link:active {
  color: inherit !important;
  background: transparent !important;
  border: none !important;
  /* 其余你项目中自定义的激活样式都可以在这里重置 */
}

内容的提问来源于stack exchange，提问作者gacat