HashHistory 和 BrowserHistory：
    hashHistory，浏览器上看到的 url 会是这样的: /#/user?name=zhangsan
    browserHistory，浏览器上看到的 url 会是这样的：/user

    https://www.jianshu.com/p/7237bf23db6a

    代码学习：
    实现react router的功能。

    1. import React, {Component} from 'react';
    2. import PropTypes from 'prop-types';
    4. class Router extends Component {
    5.     constructor(props){
    6.         super(props);
    8.         this.state = {
    9.             hash: window.location.hash
    10.         };
    11.     }
    13.     static childContextTypes = {
    14.         hash: PropTypes.string
    15.     }
    17.     getHash(){
    18.         let url = window.location.hash.replace('#','');
    19.         return url;
    20.     }
    22.     getChildContext(){
    23.         return {
    24.             hash: this.getHash()
    25.         };
    26.     }
    28.     componentDidMount() {
    29.         window.onhashchange = () => {
    30.             this.setState({
    31.                 hash: this.getHash()
    32.             });
    33.         };
    34.     }
    36.     render(){
    37.         return (<>{this.props.children}</>);
    38.     }
    39. }
    41. class Route extends Component {
    42.     static contextTypes = {
    43.         hash: PropTypes.string
    44.     }
    46.     render(){
    47.         const { path, component } = this.props;
    48.         let instance = null;
    50.         const {hash} = this.context;
    52.         if(path === hash) {
    53.             instance = React.createElement(component, null, null);
    54.         }
    56.         return (<>{instance}</>);
    57.     }
    58. }
    60. class AA extends Component {
    61.     render() {
    62.         return (<div>
    63.             AA
    64.         </div>);
    65.     }
    66. }
    68. class BB extends Component {
    69.     render() {
    70.         return (<div>
    71.             BB
    72.         </div>);
    73.     }
    74. }
    76. class App extends Component {
    77.     render() {
    78.         return (<div>
    79.            <Router>
    80.                <header>
    81.                    <div>Header</div>
    82.                    <Route path='/aa' component={AA}/>
    83.                    <Route path='/bb' component={BB}/>
    84.                </header>
    85.            </Router>
    86.         </div>);
    87.     }
    88. }
    90. export default App;