react路由基礎（Router、Link和Route）

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。

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"));