React 中NavLink 的使用

最新推荐文章于 2024-01-26 11:31:27 发布

猕猴桃-HR

最新推荐文章于 2024-01-26 11:31:27 发布

阅读量3.7k

点赞数 3

分类专栏： React

本文链接：https://blog.csdn.net/weixin_45677987/article/details/118516748

版权

React 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

本文介绍了在React应用中如何使用NavLink组件来自定义Link的样式，并展示了如何在App.js中对NavLink进行封装，以便更灵活地传递参数。NavLink提供了如activeClassName、activeStyle等属性来控制选中状态的样式，同时支持exact、strict等选项以精确匹配URL。通过封装，可以创建自定义的myNavLink组件，使得代码更加模块化。

摘要由CSDN通过智能技术生成

React 框架中
NavLink 的使用: 

 通过NavLink可以给Link添加类名，从而实现修改样式
 <Nav-Link activeClassName="my-active"className="nav-link" to="/home" component={Home}>

 <Nav-Link> 标签身上默认有这个属性Active 属性。 默认就是加上active 属性;
 但是activeClassName 属性可以不写,  默认就是加上 active 属性
  
 对NavLink 组件的封装, 
 在 app.js 文件中  进行传参
 // 标签体的内容最为一个特殊的props 传递给组件, key值时children, value 是标签的具体内容 
 <myNavLink to="/home">Home</myNavLink>
 <myNavLink to="/about">About</myNavLink>

 import React, {Component} from 'raect';
 import {NavLink} from 'react-router-dom';  // 从react-router-dom 中引入NavLink 组件
 // 定义NavLink 组件
 class Index extends Component {
   render() {
     console.log(this.props);
     return (
       <Navlink activeClassName="my-active" className="nav-link" {...this.props}></navLink>
     )
   }
 }
---------------------------------------------------------------------------------------
<Nav-LinK> 标签是<Link> 的特定版本, 会在匹配当前的url的时候给已经渲染的元素添加参数。 组件的属性有：
 1：activeClassName(string): 设置选中样式， 默认值为active;
 2: activeStyle(object): 当元素被选中时, 为此元素添加样式
 3: exact(bool):  为true时, 只有当导致和完全匹配class 和style 才会应用。
 4: strict(bool):  为true时, 在确定的位置是否与当前url匹配时, 将考虑位置pathname 后的斜线
 5：isActive(function) 判断链接是否激活的额外功能。