Custom Link

Custom Link

/**
 * Created by mapbar_front on 2019/7/19.
 */
import React,{Component} from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
} from 'react-router-dom';
import Home from './../Home/Home';
import About from './../About/About';

function OldSchoolMenuLink({label,to,activeOnlyWhenExact}){
    return(
        <Route
            path={to}
            exact = {activeOnlyWhenExact}
            children = {({match})=>(
                <div className={match?"active":""}>
                    {match?">":""}
                    <Link to={to}>{label}</Link>
                </div>
            )}
        />
    )
}
class CustomLink extends Component{
    render(){
        return(
            <Router>
                <ul>
                    <OldSchoolMenuLink activeOnlyWhenExact={true} to="/" label="Home"/>
                    <OldSchoolMenuLink to="/about" label="About"/>
                </ul>
                <hr/>
                <Route exact path="/" component={Home}/>
                <Route path="/about" component={About}/>
            </Router>
        )
    }
}
export default CustomLink;

这个例子主要体现了Route组件中children的基本用法。