react-router-dom@6.4.2中/路由NavLink的activeclassName切换失效求助

在react-router-dom v6里，NavLink默认采用部分匹配规则，所以指向/的NavLink会匹配所有以/开头的路由（比如/Questions、/Tags），导致切换到其他路由时Home的激活类仍保留。另外v6已经移除了exact属性，之前的exact设置自然无效，而简单的三元表达式没考虑到部分匹配的特性，所以也起不到作用。

给你两种可行的解决办法：

方法一：使用end属性（推荐） #

v6里用end属性替代了旧版的exact，给根路由的NavLink加上这个属性后，只有当路由完全匹配/时才会添加激活类：

<nav className='side-nav'>
  <NavLink to='/' className='side-nav-links' activeClassName='active' end>
    <p>Home</p>
  </NavLink>
  <div className='side-nav-div'>
    <div><p>PUBLIC</p></div>
    <NavLink to='/Questions' className='side-nav-links' activeClassName='active'>
      <img src={Globe} alt="Globe" />
      <p style={{paddingLeft: "10px"}}> Questions </p>
    </NavLink>
    <NavLink to='/Tags' className='side-nav-links' activeClassName='active' style={{paddingLeft: "40px"}}>
      <p>Tags</p>
    </NavLink>
    <NavLink to='/Users' className='side-nav-links' activeClassName='active' style={{paddingLeft: "40px"}}>
      <p>Users</p>
    </NavLink>
  </div>
</nav>

方法二：函数式自定义className #

如果需要更灵活的判断逻辑，可以用函数式的className，手动检查当前路径是否完全等于/：

<nav className='side-nav'>
  <NavLink 
    to='/' 
    className={({ isActive }) => 
      `side-nav-links ${isActive && window.location.pathname === '/' ? 'active' : ''}`
    }
  >
    <p>Home</p>
  </NavLink>
  <div className='side-nav-div'>
    <div><p>PUBLIC</p></div>
    <NavLink to='/Questions' className='side-nav-links' activeClassName='active'>
      <img src={Globe} alt="Globe" />
      <p style={{paddingLeft: "10px"}}> Questions </p>
    </NavLink>
    <NavLink to='/Tags' className='side-nav-links' activeClassName='active' style={{paddingLeft: "40px"}}>
      <p>Tags</p>
    </NavLink>
    <NavLink to='/Users' className='side-nav-links' activeClassName='active' style={{paddingLeft: "40px"}}>
      <p>Users</p>
    </NavLink>
  </div>
</nav>

注：v6里activeClassName虽仍兼容，但官方更推荐用函数式className接收isActive状态，能更灵活地控制样式类。

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