NavLink与NavLink的封装

最新推荐文章于 2024-10-23 20:38:51 发布

前端学习ing

最新推荐文章于 2024-10-23 20:38:51 发布

阅读量799

点赞数

文章标签： react

本文链接：https://blog.csdn.net/qq_39840183/article/details/119456402

版权

本文介绍了React中如何使用NavLink实现路由链接的高亮，并展示了如何封装NavLink组件以优化其功能，包括通过activeClassName自定义样式和利用this.props.children获取标签内容。还提供了具体的代码案例，包括App组件和路由组件的实现。

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

关于NavLink：

NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
标签体内容是一个特殊的标签属性
通过this.props.children可以获取标签体内容
<NavLink>比<Link>更高级一点，可以使谁点哪个就会给哪个追加一个active属性，也可以通过activeClassName属性来重新设置样式，加上!import

案例：

代码：

App组件代码：

//创建最外层组件
import React, {Component} from 'react';
import {nanoid} from 'nanoid'
import {NavLink, Route} from 'react-router-dom'

import Home from './components/pages/Home'
import About from './pages/About/index'
// import Hello from './components/Hello/index'

//创建并暴露App组件
export default class App extends Component {
    render() {
        console.log('666', nanoid());