React Router：Navbar在Switch外时NavLink的activeClass不生效问题求解

你说得没错，NavLink确实需要依赖location属性来判断当前路径是否匹配，从而添加激活类名。因为你的<Navbar />在Switch之外，没有被Route组件直接渲染，所以它无法自动获取到路由相关的location等props，导致NavLink的激活状态失效。

我给你几个可行的解决方案，分不同React Router版本来适配：

一、React Router v5及以下版本：用withRouter高阶组件注入路由props #

withRouter是React Router提供的高阶组件，它可以把location、history、match这些路由相关的props注入到任意组件中，不管这个组件是不是由Route直接渲染的。

修改你的Navbar组件：

import { withRouter, NavLink } from 'react-router-dom';

class Navbar extends Component {
  render() {
    return (
      <nav>
        {/* 现在NavLink可以正常识别激活状态了 */}
        <NavLink exact to="/" activeClassName="active">首页</NavLink>
        <NavLink exact to="/signup" activeClassName="active">注册</NavLink>
      </nav>
    );
  }
}

// 关键一步：用withRouter包裹Navbar组件
export default withRouter(Navbar);

这样处理后，Navbar就能拿到location属性，NavLink会自动对比当前路径和自身的to属性，正确添加active类名。

二、React Router v6+版本：使用useLocation钩子 #

在v6版本中，withRouter被移除了，官方推荐使用路由钩子来获取路由状态。如果你的Navbar是函数组件，可以直接用useLocation钩子：

import { NavLink, useLocation } from 'react-router-dom';

function Navbar() {
  // 获取当前路由的location对象
  const location = useLocation();

  return (
    <nav>
      {/* v6中不再支持activeClassName，改用回调函数设置类名 */}
      <NavLink 
        to="/" 
        className={({ isActive }) => isActive ? "active nav-link" : "nav-link"}
      >
        首页
      </NavLink>
      <NavLink 
        to="/signup" 
        className={({ isActive }) => isActive ? "active nav-link" : "nav-link"}
      >
        注册
      </NavLink>
    </nav>
  );
}

export default Navbar;

useLocation会返回当前的location对象，NavLink内部会利用这个对象来判断是否匹配，从而返回isActive状态，你只需要根据这个状态设置对应的类名即可。

三、通用方案：把Navbar放在Route中渲染 #

如果你不想修改Navbar组件的代码，也可以调整路由结构，把Navbar作为Route的组件来渲染，这样它会自动接收路由props：

<Router history={history}>
  <div className="container">
    {/* 用Route包裹Navbar，让它自动获取路由props */}
    <Route component={Navbar} />
    <Switch>
      <Route exact path='/' component={HomePage}/>
      <PublicRoute exact path='/signup' component={Signup}/>
      <Route component={NotFoundPage} />
    </Switch>
    <Footer />
  </div>
</Router>

这种方式不需要任何额外的代码修改，Navbar就能拿到location属性，NavLink的激活状态也会正常工作。

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