这是React Router v4的旧的，过时的答案

<Link>不再具有activeClName或activeStyle属性。在 react-router v4 中，如果要进行条件样式设置，则必须使用<NavLink>：

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact activeClName='is-active' to='/'>Home</NavLink>
        <NavLink activeClName='is-active' to='/about'>About</NavLink>
      </Nav>
      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

我在 home<NavLink>中添加了一个确切的属性，我相当确定如果没有它，home 链接将始终处于活动状态，因为/将匹配/about和您拥有的任何其他页面。

React 路由器 v6：

现在您可以使用clName属性，它现在接受一个函数并传递一个isActive布尔属性，如下所示：

<NavLink
  to="users"
  clName={({ isActive }) => (isActive ? 'active' : 'inactive')}
>
  Users
</NavLink>

您也可以添加多个类，因为v6是：

<NavLink
  to="users"
  clName={({ isActive }) =>
    isActive ? 'bg-green-500 font-bold' : 'bg-red-500 font-thin'
  }
>
  Users
</NavLink>

现场演示：Active NavLink Cles with React Router

import { NavLink, useMatch, useResolvedPath } from 'react-router-dom';
const CustomNavLink = ({ to, title }) => {
   let resolved = useResolvedPath(to);
   let match = useMatch({ path: resolved.pathname, end: true });
   return (
      <NavLink to={to} clName={`d-flex align-items-center py-2 px-4 ${match ? 'cta-btn' : 'c-n-b-link'}`} >
        <span clName='ms-1 f-w-600'>{title}</span>
      </NavLink>
)
}

对于React router V6上述自定义组件将返回一个 navlink，只要路径与给定的to路径匹配，就可以激活活动类。

作为 @ Nick 的答案（React Router v6）的补充，对于那些需要上层上下文中的活动导航状态的人..

条件渲染可能是需要的用例。例如：如果它是活动的，则渲染填充的图标，否则渲染常规图标。

这可以通过找到我们目前所处的路线来实现，然后我们可以进行条件渲染操作，但是这会有点麻烦。

相反，我们可以编写一个函数来修改Navlink的样式道具中的状态，如下所示。

  const [active, setActive] = useState('home')
  const activate = (isActive, path, activeStyle, nonActiveStyle) => {
    if (isActive) {
      setActive(path)
      return activeStyle
    }
    return nonActiveStyle
  }
  return (
    <nav>
      <NavLink
        to="/"
        style={(activeNav) => activate(activeNav.isActive, 'home')}
      >
        {active === 'home' ? <HomeFill /> : <Home />}
      </NavLink>
      <NavLink
        to="/profile"
        style={(activeNav) => activate(activeNav.isActive, 'profile')}
      >
        {active === 'profile' ? <ProfileFilled /> : <Profile />}
      </NavLink>
    </nav>
  )