NavLink组件

react-router之NavLink组件

本文内容整理参考借鉴以下文章：
https://www.jianshu.com/p/6583b7258e78
https://reacttraining.com/react-router/web/api/BrowserRouter

在此以表感谢！

1–的一个特殊版本，当呈现的元素与当前URL匹配时，它将向其添加样式属性。
2–可以使用activeClassName（activeClassName默认值为 active）来设置Link被选中时被附加的class，使用activeStyle来配置被选中时应用的样式。此外，还有一个exact属性,此属性要求location完全匹配才会附加class和style。这里说的匹配是指地址栏中的URl和这个Link的to指定的location相匹配。

属性：
1- activeClassName: string

当元素处于激活状态时应用的类，默认为 active。它将与 className 属性一起使用。

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

2- activeStyle: object

当元素处于激活状态时应用的样式

const activeStyle = {
  fontWeight: 'bold',
  color: 'red'
};

<NavLink to="/faq" activeStyle={activeStyle}>FAQs</NavLink>

3- exact: bool

如果为 true，则只有在位置完全匹配时才应用激活类/样式

<NavLink exact to="/profile">
  Profile
</NavLink>

4- strict：bool

如果为 true，则在确定位置是否与当前 URL 匹配时，将考虑位置的路径名后面的斜杠

<NavLink strict to="/events/">
  Events
</NavLink>

5- isActive：func

添加额外逻辑以确定链接是否处于激活状态的函数。如果你要做的不仅仅是验证链接的路径名与当前 URL 的路径名相匹配，那么应该使用它。

<NavLink
  to="/events/123"
  isActive={(match, location) => {
    if (!match) {
      return false;
    }

    // only consider an event active if its event id is an odd number
    // 仅当事件id为奇数时才将其视为激活的事件
    const eventID = parseInt(match.params.eventID);
    return !isNaN(eventID) && eventID % 2 === 1;
  }}
>
  Event 123
</NavLink>

6- location：object

isActive 默认比较当前历史位置（通常是当前的浏览器 URL）。你也可以传递一个不同的位置进行比较。