react之NavLink封装

NavLink可以实现路由链接的高亮，通过activeclassName指定样式名。

<NavLink  className="list-group-item" to="/about">About</NavLink>
<NavLink className="list-group-item" to="/home">Home</NavLink>

如果有多个路由链接，就要写很多个<NavLink className="list-group-item" to="...">...</NavLink>重复性的代码，因此需要封装一下。

封装代码如下：

MyNavLink.jsx

import React, { Component } from 'react'
import { NavLink } from "react-router-dom";
export default class MyNavLink extends Component {
    render() {
        return (
            <NavLink className="list-group-item" {...this.props} />
        )
    }
}

app.js

<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>

1. 标签体内容是一个特殊的标签属性

2. 通过this.props.children可以获取标签体内容