在 react-router v3 中，我们有 activeStyle 和 activeClassName 来设置活动链接的样式
我们可以做这样的事情
<div id="tags-container">
{tags.map(t =>
<Link
className="tags"
activeStyle={{ color: 'red' }}
to={t.path}
>
{t.title}
</Link>
)}
</div>
我想知道如何在 v4 中做同样的事情？
使用 NavLink 代替 Link。它没有记录，但它的工作如您所愿。 https://github.com/ReactTraining/react-router/issues/4318
2017 年 5 月 17 日更新：
你可以NavLink在react-routerv4中做到这一点
<div id="tags-container">
{tags.map(t =>
<NavLink
className="tags"
activeStyle={{ color: 'red' }}
to={t.path}
>
{t.title}
</NavLink>
)}
</div>
如果您遇到导航菜单正常工作的问题，但当您单击链接和路线更改时它没有正确更新，但如果您按 F5 可以正常工作，您可以执行以下操作：
这可能是因为您正在使用 Redux，shouldComponentUpdate它的功能上有一个 Lifecycle 方法connect。您可能将 Nav 组件包装在connect. 这一切都很好。shouldComponentUpdate是什么毁了你的生活。
要修复，只需将路由器带入您的mapStateToProps功能：
// This lets shouldComponentUpdate know that the route changed,
// which allows the Nav to re-render properly when the route changes, woot!
const mapStateToProps = (state) => {
return {
router: state.router,
}
}
// or, if you prefer pro style destructure shorthand:
const mapStateToProps = ({ router }) => ({ router })
如果您不太确定state.router来自哪里，它来自您组合减速器的文件，您将看到如下内容：
import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'
import authReducer from './components/auth/auth_reducer'
export default combineReducers({
router: routerReducer,
auth: authReducer,
})
这是一个漂亮的baller Nav Link的一些HTML和CSS：
HTML
<ul id="Nav_menu">
<li>
<NavLink
to="/home"
className="Nav_link"
activeClassName="activeRoute"
activeStyle={{ color: 'teal' }}
>
HOME
</NavLink>
</li>
<li>
<NavLink
to="/products"
className="Nav_link"
activeClassName="activeRoute"
activeStyle={{ color: 'teal' }}
>
PRODUCTS
</NavLink>
</li>
</ul>
注意：如果您要链接到"/"，请将exact道具放在 NavLink 上。
CSS
#Nav_menu {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
.Nav_link:link {
color: #fff;
font-size: 1.6rem;
line-height: 1.6rem;
text-decoration: none;
}
.Nav_link:visited {
color: #fff;
}
.Nav_link:hover {
color: yellow;
}
.Nav_link:active {
color: teal;
}
.activeRoute {
background-color: yellow;
border-bottom: 0.4rem solid teal;
cursor: not-allowed;
}
请注意activeStyleHTML 标记中的内容。这是我可以更改活动路线/链接上文本颜色的唯一方法。color: teal;当我放入activeRouteCSS 类时它不起作用。在另一个选项卡中打开它：https ://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md
如果你不知道我为什么rem用px. 这是您研究网络可访问性和基础的绝佳机会font-size: 10px;。
保持健康，玩得开心。
react-router v4自定义链接文档中的这个示例将帮助您完成它：
const OldSchoolMenuLink = ({ label, to, activeOnlyWhenExact }) => (
<Route path={to} exact={activeOnlyWhenExact} children={({ match }) => (
<div className={match ? 'active' : ''}>
{match ? '> ' : ''}<Link to={to}>{label}</Link>
</div>
)}/>
);
因此，在您的情况下，您可以创建以下组件：
const CustomLink = ({ activeStyle, children, className, to, activeOnlyWhenExact }) => (
<Route path={to} exact={activeOnlyWhenExact} children={({ match }) => (
<Link to={to} className={className} style={match && activeStyle}>{children}</Link>
)}/>
);
然后像这样使用它：
<div id="tags-container">
{tags.map(t =>
<CustomLink
className="tags"
activeStyle={{ color: 'red' }}
to={t.path}
>
{t.title}
</CustomLink>
)}
</div>
扩展@agm1984 的答案： NavLinks 的解决方案没有正确更新样式，使用routerReducerfromreact-router-redux对我不起作用。相反，我发现问题在于connect包装器使用shouldComponentUpdate并阻止了重新呈现包含 NavLinks 的组件。
在我的情况下，正确的解决方案是将选项对象connect作为第四个参数传递，如下所示：
export default connect(mapStateToProps, null, null, { pure: false })(NavItems);
一切仍然是一样的。但是，react-router-dom v4 替换Link为NavLink
import { NavLink as Link } from 'react-router-dom';也很好。注意：默认情况下，导航链接处于活动状态，因此您可以设置样式a:active或activeStyle={{color: 'red'}}
反应路由器 v6：
资料来源：带有 React Router 的 Active NavLink 类
我知道这是v4的一个问题，但由于v6已发布，我们现在可以通过使用className现在接受函数并传递isActive布尔属性的属性来完成此操作，如下所示：
<NavLink
to="users"
className={({ isActive }) => (isActive ? 'active' : 'inactive')}
>
Users
</NavLink>
您也可以添加多个类，因为v6已经发布：
<NavLink
to="users"
className={({ isActive }) =>
isActive ? 'bg-green-500 font-bold' : 'bg-red-500 font-thin'
}
>
Users
</NavLink>