React-router-dom路由的使用
阿新 • • 發佈:2018-12-17
React-router-dom的入門使用
1.專案引入react-router-dom
安裝:
npm install react-router-dom --save
引入:
import {
BrowserRouter as Router,
Route,
Link,
Switch,
Redirect
} from 'react-router-dom'
2.使用:
使用Link標籤作為跳轉a標籤
<Link to='/path' />
使用Route 標籤作為顯示(展示)標籤。
<Route path='/...' component={元件名} />
3.注意:
使用路由時,需要在最外層包裹Router標籤,否則會報錯
render(){
return(
<Router>
<Link to='...' />
...
<Route path='/...' component={...}>
</Router>
)
}
4.路由傳參:
只需在Route標籤的path屬性做小修改即可。
<Route path='/路勁名/:id' component={...} />
id為所接收的引數名
在元件內使用props屬性內的match屬性獲取路由相關的屬性值。match就相當於vue內的$route物件
this.props.match.url //獲取路由url
this.props.match.變數名 //獲取路由傳參的指定引數值