React Router v4激活链接问题：子路由下保持父路由激活样式

嘿，这个问题我熟！当访问子路由时要保持父导航的激活状态，在React Router（你用的withRouter应该是v4/v5版本）里有几种简单的实现方式，我给你一步步讲：

解决方案1：用NavLink的自定义isActive函数（推荐） #

React Router的NavLink组件自带激活状态的处理，默认只会精确匹配路由，但我们可以通过自定义isActive函数来让它匹配子路由。

首先，把你主导航里的Link换成NavLink，然后给每个父路由的NavLink添加自定义的isActive判断逻辑：

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

const Navbar = () => (
  <div className='grid'>
    <NavLink 
      exact 
      to='/' 
      activeClassName='active'
    >
      Home
    </NavLink>
    <NavLink 
      to='/login' 
      activeClassName='active'
      isActive={(match, location) => match || location.pathname.startsWith('/login')}
    >
      Login
    </NavLink>
    <NavLink 
      to='/register' 
      activeClassName='active'
      isActive={(match, location) => match || location.pathname.startsWith('/register')}
    >
      Register
    </NavLink>
    <NavLink 
      to='/profile' 
      activeClassName='active'
      isActive={(match, location) => match || location.pathname.startsWith('/profile')}
    >
      Profile
    </NavLink>

    {/* 你的路由配置 */}
    <Route exact path='/' component={HomePage} />
    <Route path='/login' component={LoginForm} />
    <Route path='/register' component={RegisterForm} />
    <PrivateRoute path='/profile' component={ProfilePage} />
    {/* 子路由示例，比如/profile/settings */}
    <PrivateRoute path='/profile/settings' component={ProfileSettings} />
  </div>
);

export default withRouter(Navbar);

逻辑解释： #

• activeClassName='active'：指定路由激活时要添加的CSS类名，你可以换成自己项目里的类名。
• isActive函数接收两个参数：match（当前路由是否精确匹配）和location（当前页面的路由信息）。我们判断要么精确匹配父路由，要么路径以父路由开头，只要满足一个就激活这个导航项。
• 根路由/需要加exact，否则所有子路由都会匹配/导致它一直处于激活状态。

解决方案2：手动通过location判断添加激活类名 #

如果你更习惯用普通的Link组件，也可以借助withRouter传递的location props，手动判断当前路径是否属于父路由，然后给导航项添加激活类：

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

const Navbar = ({ location }) => {
  // 自定义判断函数：检查当前路径是否以目标路径开头
  const isNavActive = (targetPath) => {
    if (targetPath === '/') {
      // 根路由需要精确匹配
      return location.pathname === '/';
    }
    return location.pathname.startsWith(targetPath);
  };

  return (
    <div className='grid'>
      <Link 
        to='/' 
        className={isNavActive('/') ? 'active' : ''}
      >
        Home
      </Link>
      <Link 
        to='/login' 
        className={isNavActive('/login') ? 'active' : ''}
      >
        Login
      </Link>
      <Link 
        to='/register' 
        className={isNavActive('/register') ? 'active' : ''}
      >
        Register
      </Link>
      <Link 
        to='/profile' 
        className={isNavActive('/profile') ? 'active' : ''}
      >
        Profile
      </Link>

      {/* 你的路由配置 */}
      <Route exact path='/' component={HomePage} />
      <Route path='/login' component={LoginForm} />
      <Route path='/register' component={RegisterForm} />
      <PrivateRoute path='/profile' component={ProfilePage} />
      <PrivateRoute path='/profile/settings' component={ProfileSettings} />
    </div>
  );
};

export default withRouter(Navbar);

逻辑解释： #

• withRouter会把路由相关的location props注入到组件里，我们可以通过location.pathname拿到当前页面的路径。
• 根路由单独处理，避免所有子路由都触发激活；其他路由只要路径以父路由开头，就添加激活类。

两种方法都能完美解决你的问题，第一种用NavLink自带的能力更简洁，第二种手动控制的方式灵活性更高，你可以根据自己的项目需求选择～

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