React NavLink及Switch

一、NavLink与封装NavLink

        1、NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
        2、标签体内容是一个特殊的标签属性
        3、通过this.props.children可以获取标签体内容

MyNavLink组件

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
export default class MyNavLink extends Component {
    render() {
        return (
            <li >
                {/* 
                    标签体内容是一个特殊的标签属性 children 
                    会默认跟随props传递过来
                */}
                <NavLink activeClassName="active" {...this.props}></NavLink>
            </li>
        )
    }
}

二、Switch的使用

          1、通常情况下，path和component是一一对应的关系
          2、Switch可以提高路由匹配效率（单一匹配）

<Switch>
  <Route path="/about" component={About} />
  <Route path="/home" component={Home} />
  <Route path="/home" component={Test} />
</Switch>