React Router v3如何为Link标签的父级li元素添加active类

实现思路 #

React Router v3 原生仅支持给Link组件本身添加activeClassName，要给父级元素加激活类，可以通过withRouter高阶组件注入路由相关属性，手动判断当前路由是否匹配后动态添加类名。

操作步骤 #

1. 导入依赖 #

从react-router中导入需要的API：

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

2. 改造现有组件 #

用withRouter包裹你的侧边栏组件，注入location和router属性，根据路由匹配结果动态给li加类：

const Sidebar = (props) => {
  // 方式1：简单前缀匹配，适合子路由前缀一致的场景
  const isTrackActive = props.location.pathname.startsWith('/track-page');

  // 方式2：用路由自带isActive方法，更精准，自动适配参数、查询参数场景
  // 第二个参数false表示非严格匹配，前缀符合即激活；传true则要求路径完全一致
  // const isTrackActive = props.router.isActive('/track-page', false);

  return (
    <li className={`sidebar-item ${isTrackActive ? 'active' : ''}`}>
        <div className="sidebar-link">
            <span>Track Page</span>
            <div className="collapse first-level">
                <Link className="first-level__link" to="/track-page" activeClassName="active">
                    Track Page 1
                </Link>
                <Link className="first-level__link" to="/track-page-2" activeClassName="active">
                    Track Page 2
                </Link>
            </div>
        </div>
    </li>
  )
}

// 用withRouter包裹后导出，组件就能拿到路由相关属性
export default withRouter(Sidebar);

可复用封装（可选） #

如果有多个同类父级导航项，可以封装成通用组件减少重复代码：

// 封装通用父级导航组件
const NavParent = ({ to, strict = false, children, router, className = '' }) => {
  const isActive = router.isActive(to, strict);
  return (
    <li className={`sidebar-item ${isActive ? 'active' : ''} ${className}`}>
      {children}
    </li>
  )
}
const WrappedNavParent = withRouter(NavParent);

// 业务代码中直接调用
<WrappedNavParent to="/track-page" strict={false}>
  <div className="sidebar-link">
      <span>Track Page</span>
      <div className="collapse first-level">
          <Link className="first-level__link" to="/track-page" activeClassName="active">
              Track Page 1
          </Link>
          <Link className="first-level__link" to="/track-page-2" activeClassName="active">
              Track Page 2
          </Link>
      </div>
  </div>
</WrappedNavParent>

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