Facebook對react進行持續的改進，路由作為其中最重要的一部分，在4.0版本對其進行了大量的優化，總的來說，簡單易用！
之前使用react路由的時候，我們引入的是react-router包。
現在改版之後，我們引入的包是react-router-dom包。

改版之後的react-router-dom路由，我們要理解三個概念，Router、Route和Link。

1、Router
Router我們可以把它看做是react路由的一個路由外層盒子，它裡面的內容就是我們單頁面應用的路由以及路由元件。

使用方式：

import { BrowserRouter as Router } from "react-router-dom"
 
;
class Main extends Component{
    render(){
        return(
        <Router>
            <div>
                //otherCoding
            </div>
        </Router>
        )
    }
}

2、Link
Link是react路由中的點選切換到哪一個元件的連結，（這裡之所以不說是頁面，而是說元件，因為切換到另一個介面只是展示效果，react的本質還是一個單頁面應用-single page application）。

基本使用方式：

import { BrowserRouter as Router, Link} from "react-router-dom";
class Main extends Component{
    render(){
        return(
        <Router>
            <div>
                <ul>
                    <li><link to='/'>首頁</Link></li>
                    <li><link to='/other'
 
>其他頁</Link></li>
                </ul>
            </div>
        </Router>
        )
    }
}

特別說明：第一、Router下面只能包含一個盒子標籤，類似這裡的div。
第二、Link代表一個連結，在html介面中會解析成a標籤。作為一個連結，必須有一個to屬性，代表連結地址。這個連結地址是一個相對路徑。
第三、Route，是下面要說的元件，有一個path屬性和一個元件屬性（可以是component、render等等）。

3、Route
Route代表了你的路由介面，path代表路徑，component代表路徑所對應的介面。

使用方式：

import React,{ Component } from "react";

import { render } from "react-dom";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class Home extends Component{
    render(){
        return (
            <div>this a Home page</div>
        )
    }
}
class Other extends Component{
    render(){
        return (
            <div>this a Other page</div>
        )
    }
}
class Main extends Component{

    render(){
        return (
            <Router>
                <div>
                    <ul>
                        <li><Link to="/home">首頁</Link></li>
                        <li><Link to="/other">其他頁</Link></li>
                    </ul>
                    <Route path="/home" component={Home}/>
                    <Route path="/other" component={Other}/>
                </div>
            </Router>
        )
    }
}

render(<Main />,document.getElementById("root"));