React手册之Link和NaviLink区别

Link:点击是url会直接更新，组件会重新渲染而不是重新加载

它可以是对象也可以是字符串但是最后都会转为location对象的

点击Link后，路由系统发生了什么？

Link 组件最终会渲染为 HTML 标签 <a>虽然 Link 被渲染为超链接，但在内部实现上使用脚本拦截 

浏览器的默认行为，然后调用了history.pushState 方法（注意，文中出现的 history 指的是通过 	 

history 包里面的 create*History 方法创建的对象，window.history 则指定浏览器原生的 history 对

象，由于有些 API 相同，不要弄混）。history 包中底层的 pushState 方法支持传入两个参数 state 

和 path，在函数体内有将这两个参数传输到 createLocation 方法中，最终返回location，系统会将 上述 location 对象作为

参数传入到 TransitionTo 方法中，然后调用 window.location.hash 或者window.history.pushState() 

修改了应用的 URL，这取决于你创建 history 对象的方式。同时会触发history.listen 中注册的事件监

听器

location对象

location = {
  pathname, // 当前路径，即 Link 中的 to 属性
  search, // search
  hash, // hash
  state, // state 对象
  action, // location 类型，在点击 Link 时为 PUSH，浏览器前进后退时为 POP，调用 replaceState 方法时为 REPLACE
  key, // 用于操作 sessionStorage 存取 state 对象
}

NaviLink是对Link进行了二次封装

它引入了Link然后对其添加了相关属性

 NavLink.propTypes = {
    ...Link.propTypes,//Link原有功能
    "aria-current": ariaCurrentType,
    activeClassName: PropTypes.string,//设置选中样式，默认值为active
    activeStyle: PropTypes.object,//当元素被选中时，为此元素添加样式
    className: PropTypes.string,//class名
    exact: PropTypes.bool,//为true时，只有当导致和完全匹配class和style才会应用
    isActive: PropTypes.func,//)判断链接是否**的额外逻辑的功能
    location: PropTypes.object,
    strict: PropTypes.bool,
    style: PropTypes.object
  };

参考文档