react的Link标签


属性描述

activeClassName

当被点击时,的className接受一个它的值(activeClassName),默认情况下它是不激活;

activeStyle

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

onClick(e)

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

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

onlyActiveOnIndex

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

 

例子:

<Link className="rg-form__title rg-form__title--half" 
activeStyle={{color: '#44bbd0', borderBottom: "10px solid #cfd0d0" }}
to="/reg/sign-in"> ....<Link/>

{{}}中间是json格式,不是css语法格式,border-bottom应该写成borderBottom;类似的还有maxWidth;

使用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>
 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



猜您在找 react 中 Link 标签 重新打开一个新的浏览器窗口 link标签和import标签的区别 HTML标签