如何在React Router中根据路由为元素添加类名？

嘿，这个需求在React项目里太常见了，我给你整理几种实用的实现思路，都是React Router生态里常用的方案～

方法一：用官方内置的NavLink组件（最省心） #

React Router其实已经帮我们封装好了路由激活的逻辑，NavLink组件会自动给匹配当前路由的元素添加激活类名，默认是active，还支持自定义规则，这是最推荐的写法：

// 在你的NavBar组件里导入NavLink
import { NavLink } from 'react-router-dom';

const NavBar = () => {
  return (
    <nav className="nav-bar">
      {/* 精确匹配根路由，匹配时自动加active类 */}
      <NavLink exact to="/" className="nav-item">
        首页
      </NavLink>

      {/* 自定义激活类名，用函数动态返回 */}
      <NavLink 
        to="/login" 
        className={({ isActive }) => `nav-item ${isActive ? 'active-nav' : ''}`}
      >
        登录
      </NavLink>

      {/* 模糊匹配（比如/dashboard下的子路由也会激活这个链接） */}
      <NavLink to="/dashboard" className="nav-item">
        控制台
      </NavLink>
    </nav>
  );
};

方法二：用useLocation钩子自定义判断（适合需要复杂逻辑的场景） #

如果你的激活规则比较特殊，比如要匹配多个路由或者做自定义判断，可以用useLocation获取当前路由信息，自己写判断逻辑：

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

const NavBar = () => {
  const location = useLocation();

  // 自定义判断函数，根据需求调整匹配规则
  const isCurrentRoute = (targetPath) => {
    // 精确匹配
    return location.pathname === targetPath;
    // 如果要模糊匹配子路由可以用：return location.pathname.startsWith(targetPath);
  };

  return (
    <nav>
      <Link 
        to="/register" 
        className={`nav-link ${isCurrentRoute('/register') ? 'active' : ''}`}
      >
        注册
      </Link>
      <Link 
        to="/dashboard" 
        className={`nav-link ${isCurrentRoute('/dashboard') ? 'active' : ''}`}
      >
        控制台
      </Link>
    </nav>
  );
};

方法三：类组件用withRouter高阶组件（兼容旧代码） #

如果你的NavBar是类组件，没法用钩子，就用withRouter把路由相关的props注入到组件里：

import { withRouter, Link } from 'react-router-dom';
import React, { Component } from 'react';

class NavBar extends Component {
  checkActive = (targetPath) => {
    return this.props.location.pathname === targetPath;
  };

  render() {
    return (
      <nav>
        <Link 
          to="/" 
          className={`nav-item ${this.checkActive('/') ? 'active' : ''}`}
        >
          首页
        </Link>
      </nav>
    );
  }
}

// 用withRouter包裹组件，注入location等路由props
export default withRouter(NavBar);

小提示 #

• 如果需要更优雅地拼接类名，可以用classnames库，比如：classnames('nav-item', { active: isActive })，避免写一堆模板字符串。
• 注意exact属性的使用，不加的话，/会匹配所有以/开头的路由，可能导致多个链接同时激活。

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