[React Router v4] Style a Link that is Active with NavLink

weixin_30726161

于 2017-03-21 04:10:00 发布

阅读量50

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/6592585.html

本文介绍如何使用 React Router v4 中的 NavLink 组件为当前激活的导航链接添加样式。通过三种不同方式设置 activeClassName 或使用 isActive 回调函数实现链接的激活状态判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

We often need to be able to apply style to navigation links based on the current route. In React Router v4 you can easily accomplish this with the NavLink component. In this lesson, we will step through three ways to accomplish styling links through the use of an active class with the NavLink component.

There are three ways to check an link is active or not and add active class for it:

const isLinkActive = (match, location) => {
    return match
};

const Nav = () => (
  <nav>
      <NavLink to="/" exact activeStyle={{color: 'pink'}}>Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
      <NavLink replace
               to={{pathname: '/contact'}}
               isActive={isLinkActive}
               activeClassName="active"
      >Contact</NavLink>
  </nav>
);