react中对NavLink进行二次封装

demo如下：

一、创建一个MyNavLink 的组件

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import "./myNavLink.css"
export default class MyNavLink extends Component {
    render() {
        console.log(this.props)
        //let {to,children} = this.props
        // 标签体的内容通过children属性渲染在标签上
        return (
            // 写法一：推荐
            <div className='myNavLink'>
                <NavLink {...this.props} className="navItem" activeClassName='activeItem'></NavLink> 
            </div>
            // 写法二：不推荐,如果有很多属性还需要每个进行展示，增加代码量
            // 
            //     {children}
            // 
        )
    }
}

二、在需要使用的页面引入组件并使用

1、activeClassName是NavLink组件上面的激活样式属性
2、标签体内容是一个特殊的标签属性，通过this.props.children可以获取标签体内容