1. <NavLink>

<NavLink>是一个特殊版本的<Link>。当它与当前的URL匹配时，它将为渲染的元素添加样式属性。

import { NavLink } from 'react-router-dom'

<NavLink to="/about">About</NavLink>

1.1. activeClassName: string

当<NavLink>是激活状态，这个class会赋予这个元素。默认是激活状态。这将与className属性一起使用。

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

1.2. activeStyle: object

当<NavLink>是激活状态时，这个style对象会被应用到元素。

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>

1.3. exact: bool

默认值： false

当为true时，则只有在location完全匹配时才会应用激活的class/style。

默认值：false

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

从上可以看到，exact模式的匹配是双向的，exact只代表to和location.pathname之间的比较模式。A与B进行匹配和B和A进行匹配是等价的。

1.4. strict: bool

 默认值：false

当为true时，在确定to中的位置是否与当前URL匹配时，将考虑位置路径名的末尾斜杠。请参阅 <Route strict>获取更多信息

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

从上可以看出，strict模式的匹配是单向的，它只是针对于to中以/结尾的路径做限制。也就是说，这个规则对不以/结尾的路径不起作用。

strict会先将location.pathname中的末尾变为/，如果以一个字符或者字符串结尾，会去掉这些字符，如：/one/two会被转为/one/。因此/one/和/one不匹配，/one/和/one/two是匹配的。

但此模式对/无用，to='/'任何都匹配。

1.5. isActive: func

一个函数，返回值是bool类型。用于添加额外的逻辑，以确定链接是否是激活的。如果您想要做更多的事情，而不是验证该链接的路径名与当前URL的路径名匹配，那么就应该使用该方法。

接收match、location等作为参数，不是一个对象，所以不需要解构{ match, location }。

// only consider an event active if its event id is an odd number只有当事件id为奇数时才考虑事件活动
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>·

1.6. location: object

isActive比较当前的历史位置(通常是当前的浏览器URL)。为了与不同的位置进行比较，可以传入一个location

<NavLink 
  to='/two'
  isActive={(match, location) => {
    //do Something
    //这里接收到的location是当前的location
  }}
  loaction={oneLocating}>
  Two
  </NavLink>

当指定了location属性的时候，默认的当前的location就会被覆盖掉。也就是isActive的函数中接收到的location就是这个属性指定的location。

当指定了location属性，isActive的函数接收的match会变为null?