React-router学习之（Link NavLink Rediret）

##Link

生成一个无刷新的a元素

 -to

　-字符串：跳转目标地址

　-对象：{

　　- pathname：url路径

　　- search：参数

　　- hash：hash值

　　- state：附件状态信息　　

}

　-replace：bool，表示是否替换当前地址，默认时false

　- innerRef：可以将内部的a元素附着在传递对象或者函数上

　　--函数

　　- 对象

<Link to={{
        pathname: "/a",
        state: "获得状态A"
      }} style={{ marginRight: 20 }}>跳转A</Link>
      <Link to={{
        pathname: "/B",
        state: "获得状态B"
      }}>跳转B</Link>

 

##NavLink：是一种特殊的Link,Link有的它都有

它具备的额外功能：根据当前地址和链接来决定该链接的样式

activeClassName：string

//当被激活时，显示类名为selected 的css样式

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

activeStyle：object

// 在元素处于活动状态时应用于该元素的样式。

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

exact: 精确匹配

//仅当url与NavLink里to的值完全相等时，才应用类名为selected的CSS样式

<NavLink exact  to="/about"  activeClassName="selected">
  About
</NavLink>

isActive: ：function

//用于添加额外逻辑以确定链接是否处于活动状态的功能。
//如果您要做的不仅仅是验证链接的路径名是否与当前URL匹配，那么应该使用此方法

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>

 

<NavLink to={{
        pathname: "/a",
        state: "获得状态A"
      }} style={{ marginRight: 20 }}>跳转A</NavLink>
      <NavLink to={{
        pathname: "/B",
        state: "获得状态B"
      }}>跳转B</NavLink>

css

.active{
  text-decoration: none;
  color:red;
}