react router 4.x

---恢复内容开始---

学习React，必须要学习React router

目前 2.x和4.x都可以用,我在项目中直接安装，默认是4.x版本，然后就踩一下。

4.x和2.x的区别（3.x和2.x没有区别,但2.x还在维护）

• 4.x路由不再是集中式的，路由规则存在于布局和组件之间。
• 4.x的路由不再需要嵌套来实现布局结构和页面（组件）嵌套。
• 4.x没有 props.children 来渲染组件。在4.x中<Route />组件在哪里写，组件就在哪里渲染。

下面是代码示例，（我写在 create-react-app脚手架中）

            import React, { Component }  from 'react';

import { BrowserRouter,Route,Link,Switch} from 'react-router-dom'


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

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

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

const App = () => (
    <BrowserRouter>
        <div>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route  path="/about" component={About} />
                <Route  path="/inbox" component={Inbox} />
            </Switch>
        
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/inbox">Inbox</Link></li>
                <li><Link to="/about"> about</Link></li>
            </ul>
        </div>
    </BrowserRouter>
)
export default App;