react路由基礎(Router、Link和Route)
阿新 • • 發佈:2019-01-05
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"));