React中NavLink始终激活HOME链接的问题排查与解决

我尝试实现仅当页面处于激活状态时Nav链接改变颜色的功能，但HOME链接始终显示激活状态，其余链接都正常（页面激活时对应链接会变色）。我的代码如下：

<Nav>
    <Nav.Link><NavLink exact
        style={({ isActive }) => { return { color: isActive ? '#ffd900' : '' } }}
        className={this.state.navBarItem} to="/">HOME</NavLink></Nav.Link>


    <Nav.Link><NavLink exact
        style={({ isActive }) => { return { color: isActive ? '#ffd900' : '' } }}
        className={this.state.navBarItem} to="/about">ABOUT</NavLink></Nav.Link>

    <Nav.Link><NavLink exact
        style={({ isActive }) => { return { color: isActive ? '#ffd900' : '' } }}
        className={this.state.navBarItem} to="/service">SERVICE</NavLink></Nav.Link>

    <Nav.Link><NavLink exact
        style={({ isActive }) => { return { color: isActive ? '#ffd900' : '' } }}
        className={this.state.navBarItem} to="/course">COURSES</NavLink></Nav.Link>

    <Nav.Link><NavLink exact
        style={({ isActive }) => { return { color: isActive ? '#ffd900' : '' } }}
        className={this.state.navBarItem} to="/porfolio">PORTFOLIO</NavLink></Nav.Link>

    <Nav.Link><NavLink exact
        style={({ isActive }) => { return { color: isActive ? '#ffd900' : '' } }}
        className={this.state.navBarItem} to="/contact">CONTACT US</NavLink></Nav.Link>
</Nav>

问题原因 #

核心问题是嵌套了Bootstrap的Nav.Link和React Router的NavLink，两个组件的激活状态逻辑发生冲突：

• React Router的NavLink虽然加了exact，但外层的Bootstrap Nav.Link会独立判断激活状态，而/是所有路径的前缀，导致HOME链接始终被标记为激活。
• 双重嵌套会让激活状态的样式判断混乱，即使NavLink的isActive正确，也可能被外层Nav.Link的默认激活样式覆盖。

解决方案 #

方案一：移除外层Bootstrap Nav.Link，直接使用React Router NavLink

去掉多余的嵌套层级，让NavLink直接作为Nav的子元素，确保exact属性正常生效：

<Nav>
  <NavLink 
    exact
    style={({ isActive }) => ({ color: isActive ? '#ffd900' : '' })}
    className={this.state.navBarItem} 
    to="/"
  >HOME</NavLink>

  <NavLink 
    exact
    style={({ isActive }) => ({ color: isActive ? '#ffd900' : '' })}
    className={this.state.navBarItem} 
    to="/about"
  >ABOUT</NavLink>

  <NavLink 
    exact
    style={({ isActive }) => ({ color: isActive ? '#ffd900' : '' })}
    className={this.state.navBarItem} 
    to="/service"
  >SERVICE</NavLink>

  <NavLink 
    exact
    style={({ isActive }) => ({ color: isActive ? '#ffd900' : '' })}
    className={this.state.navBarItem} 
    to="/course"
  >COURSES</NavLink>

  <NavLink 
    exact
    style={({ isActive }) => ({ color: isActive ? '#ffd900' : '' })}
    className={this.state.navBarItem} 
    to="/porfolio"
  >PORTFOLIO</NavLink>

  <NavLink 
    exact
    style={({ isActive }) => ({ color: isActive ? '#ffd900' : '' })}
    className={this.state.navBarItem} 
    to="/contact"
  >CONTACT US</NavLink>
</Nav>

方案二：用Bootstrap Nav.Link的as属性集成React Router NavLink

如果需要保留Bootstrap的导航样式，使用as属性指定Nav.Link渲染为NavLink，避免嵌套冲突：

<Nav>
  <Nav.Link
    as={NavLink}
    exact
    style={({ isActive }) => ({ color: isActive ? '#ffd900' : '' })}
    className={this.state.navBarItem} 
    to="/"
  >HOME</Nav.Link>

  <Nav.Link
    as={NavLink}
    exact
    style={({ isActive }) => ({ color: isActive ? '#ffd900' : '' })}
    className={this.state.navBarItem} 
    to="/about"
  >ABOUT</Nav.Link>

  <Nav.Link
    as={NavLink}
    exact
    style={({ isActive }) => ({ color: isActive ? '#ffd900' : '' })}
    className={this.state.navBarItem} 
    to="/service"
  >SERVICE</Nav.Link>

  <Nav.Link
    as={NavLink}
    exact
    style={({ isActive }) => ({ color: isActive ? '#ffd900' : '' })}
    className={this.state.navBarItem} 
    to="/course"
  >COURSES</Nav.Link>

  <Nav.Link
    as={NavLink}
    exact
    style={({ isActive }) => ({ color: isActive ? '#ffd900' : '' })}
    className={this.state.navBarItem} 
    to="/porfolio"
  >PORTFOLIO</Nav.Link>

  <Nav.Link
    as={NavLink}
    exact
    style={({ isActive }) => ({ color: isActive ? '#ffd900' : '' })}
    className={this.state.navBarItem} 
    to="/contact"
  >CONTACT US</Nav.Link>
</Nav>

说明 #

两种方案都能解决HOME链接始终激活的问题：

• 方案一更简洁，适合不需要Bootstrap Nav.Link额外样式的场景；
• 方案二保留了Bootstrap导航组件的特性，同时集成了React Router的路由激活逻辑。

内容的提问来源于stack exchange，提问作者Alie El Dine