react-router-dom示例讲解（四）——自定义链接

在react-router-dom的官方示例中，自定义链接算是一个比较简单的功能了。其核心就是Route以及其children属性的使用。

效果示例的展示：

相关代码：

//在App.js中
import React, {Component} from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';

class OldSchoolMenuLink extends Component{
    render(){
        return (
            <Route path={this.props.path} children={(props)=>{
                console.log(props)
                return <li>
                    {props.match ? ">" : ""}
                    <Link
                        to={this.props.path}>
                        {this.props.label}
                    </Link>
                </li>
            }} />
        )
    }
}

class App extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Router>
                <div>
                    <ul>
                        <OldSchoolMenuLink exact={true} path="/home" label="Home"/>
                        <OldSchoolMenuLink path="/about" label="About"/>
                    </ul>
                    <hr/>
                    <Route path="/home" component={Home} />
                    <Route path="/about" component={About} />
                </div>
            </Router>
        );
    }
}

class Home extends Component{
    render(){
        return (
            <h1>Home</h1>
        )
    }
}
class About extends Component{
    render(){
        return (
            <h1>About</h1>
        )
    }
}

export default App;

实现的整体思路：
Route组件是核心，它有一个children属性，这个属性会根据Route组件的路径匹配情况，做不同的东西，它会有一个参数，接受一个props。

在这里，我根据props.match的不同，返回不同的视图。

我的github地址：https://github.com/liwudi/react-router-dom4.git

下一篇：react-router-dom示例讲解（五）——阻止导航