31_NavLink组件包装优化

简单理解为自定义一个组件并自带样式

import React, {Component} from 'react'
import {Switch, Route, Redirect} from 'react-router-dom'

import About from '../views/about'
import Home from '../views/home';
import MyNavLink from './MyNavLink'

export default class App extends Component {
    render() {
        return (
            <div>
                <div className='row'>
                    <div className='col-xs-8 col-xs-offset-2'>
                        <div className='page-header'>
                            <h2>React Router Demo</h2>
                        </div>
                    </div>
                </div>
                <div className='row'>
                    <div className='col-xs-2 col-xs-offset-2'>
                        <div className='list-group'>
                            <MyNavLink className='list-group-item' to='/about'>about</MyNavLink>
                            <MyNavLink className='list-group-item' to='/home'>home</MyNavLink>
                        </div>
                    </div>
                    <div className='col-xs-6'>
                        <div className='panel'>
                            <div className='panel-body'>
                                <Switch>
                                    <Route path='/about' component={About}/>
                                    <Route path='/home' component={Home}/>
                                    <Redirect to='/home'/>
                                </Switch>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

MyNavLink.jsx

import React, {Component} from 'react'
import {NavLink} from 'react-router-dom'

export default class MyNavLink extends Component {
    render() {

        //...this.props
        //将外部传入的所有属性传递给NavLink
        return <NavLink {...this.props} activeClassName='activeClass'/>
        //用MyNavLink的人相当于用NavLink

    }
}

index.css

.activeClass {
    color:red !important;
}