react-router中<Link/>的属性详解

本文主要给大家介绍了关于react-router中
的属性的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：

使用Link标签

// 字符串定位描述符 String location descriptor.
<Link to="/hello">
 Hello
</Link>

// 对象定位描述符 Object location descriptor.
<Link to={{ pathname: '/hello', query: { name: 'ryan' } }}>
 Hello
</Link>

// 函数返回定位描述符Function returning location descriptor.
<Link to={location => ({ ...location, query: { name: 'ryan' } })}>
 Hello
</Link>

属性描述

activeClassName

当被点击时，的className接受一个它的值（activeClassName），默认情况下它是不激活；

activeStyle

当被点击时，activeStyle中的值会添加到转换后的<a/>中，样式是style="color:red;"

onClick(e)

自定义单击事件处理程序。

  • e.preventDefault() ：阻止默认事件
  • e.stopPropagation() ：阻止事件冒泡

onlyActiveOnIndex

如果onlyActiveOnIndex的值是true,中的路径完全匹配时才会连接指定路由

其它

也可以在上定义 title、id、className属性；

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • react-router中<Link/>的属性详解

    本文主要给大家介绍了关于react-router中 的属性的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 使用Link标签 // 字符串定位描述符 String location descriptor. <Link to="/hello"> Hello </Link> // 对象定位描述符 Object location descriptor. <Link to={{ pathname: '/hello', query: { name: '

  • Javascript中window.name属性详解

    关于window下自带name的属性 不知道大家有没有发现这样一种情况 在控制台里直接输出未声明变量,正常情况应该是会报错的,而且声明未赋值的变量输出应该是undefined var a; //undefined b; //报错 但是偏偏就个别特例,就是name属性 其实window自身就带有name这个属性,在控制台输入window可以可以看到 打开 往下翻就可以找到 window.name直译过来是窗口名字,主要用于为超链接和表单设置目标(targets),什么意思呢,我们做个案例 建立两个

  • React Router中Link和NavLink的学习心得总结

    目录 React Router Link和NavLink的学习 Link NavLink 总结 React Router Link和NavLink的学习 Link 现在,我们应用需要在各个页面间切换,如果使用锚点元素实现,在每次点击时,页面被重新加载,React Router提供了<Link>组件用来避免这种状况发生. 当 你点击<Link>时,url会更新,组件会被重新渲染,但是页面不会重新加载 先看个例子: // to为string <Link to="/abo

  • Spring Cloud 中@FeignClient注解中的contextId属性详解

    目录 @FeignClient注解中的contextId属性 解决方法一 解决方法二 FeignClient注解及参数问题 问题背景 解决办法 @FeignClient注解中的contextId属性 在使用@FeignClient注解前,我们需要先引入其相关依赖,版本为3.0.1 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter

  • Vue中的computed属性详解

    Vue中的computed属性详解

    目录 插值表达式 methods computed 总结 今天来说说vue中的计算属性computed,为了更好的理解计算属性的好处,我们先通过一个案例来慢慢 了解计算属性,有如下案例:定义两个输入框以及一个span标签,span标签中的内容为两个输入框中的值,span标签中的内容随着输入框中的内容变化而变化 插值表达式 我们先用插值表达式的方法来实现这一效果 <body> <div id="app"> 姓: <input type="text&

  • 如何直接访问php实例对象中的private属性详解

    前言 本文主要介绍了关于如何直接访问php实例对象中private属性的相关内容,在介绍关键部分之前,我们先回顾一下php面向对象的访问控制. 对属性或方法的访问控制,是通过在前面添加关键字 public(公有),protected(受保护)或 private(私有)来实现的.被定义为公有的类成员可以在任何地方被访问.被定义为受保护的类成员则可以被其自身以及其子类和父类访问.被定义为私有的类成员则只能被其定义所在的类访问. 类属性必须定义为公有,受保护,私有之一.如果用 var 定义,则被视为公

  • Android中的windowSoftInputMode属性详解

    Android中的windowSoftInputMode属性详解

    在前面的一篇文章中,简单的介绍了一下如何实现软键盘不自动弹出,使用的方法是设置android:windowSoftInputMode属性.那么,这个属性到底是干什么的,他有什么作用呢?今天这篇文章,就是探索android:windowSoftInputMode属性的作用的. 首先,我们从这个属性的名称中,可以很直观的看出它的作用,这个属性就是来设置窗口软键盘的交互模式的. android:windowSoftInputMode属性一共有9个取值,分别是: stateUnspecified,sta

  • ASP.NET 4.0配置文件中的ClientIDMode属性详解

    时光流逝,我们心爱的ASP.NET也步入了4.0的时代,微软在ASP.NET 4.0中对很多特性做了修改.比如我将要讨论的控件ID机制就是其中之一. 在ASP.NET 4.0之前我们总是要为控件的ClientID头疼,比如明明一个叫lblName的Label放在一个叫做grd的GridView里面后,在页面上改Label的ID就变成了诸如grd_clt02_lblName的一长串字符串,如果我们在前台想在使用JS的时候找到该Label,我们不得不用到C#脚本来获得该Label在前台的确切ID,诸

  • React中react-redux和路由详解

    React中react-redux和路由详解

    目录 观察者模式解决组件间通信问题 react-redux connect方法 Provider组件 路由 使用路由 默认路由 路由重定向 获取路由参数 路由导航 观察者模式解决组件间通信问题 使用观察者解决组件间通信,分成两步 在一个组件中,订阅消息 在另一个组件中,发布消息 发布消息之后,订阅的消息回调函数会执行,在函数中,我们修改状态,这样就可以实现组件间通信了.这就是reflux框架的实现. react-redux redux早期被设计成可以在各个框架中使用,因此在不同的框架中使用的时候

  • React中父子组件通信详解

    目录 父组件向子组件通信 存在期 父组件向子组件通信 在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信.传递的数据可以分成两类 子组件是作为属性来接收这些数据的 第一类就是数据:变量,对象,属性数据,状态数据等等 这些数据发生改变,子组件接收的属性数据就发生了改变. 第二类就是方法:父组件可以向子组件传递属性方法,子组件接收方法,并可以在组件内执行,有两种执行方式 注意:父组件传给子组件的方法是不能执行的,执行了相当于将方法的返回值传递给子组件. 第一种 作为事件回调函数执行 参数默

随机推荐