前端踩坑(一)--------------------------------------------------react-router-dom講解
阿新 • • 發佈:2018-12-18
react路由已經更新到4,網上的資料大多是舊版本,這裡我們重點講react-router-dom,它是用於dom繫結的react-router
常規匯入
import React from 'react'
import { BrowserRouter as Router,Route,Link} from 'react-router-dom'
注意BrowserRouter只能有一個孩子,
switch用於重定向孩子為Route或者redirect
---從上向下匹配,只匹配它的第一個孩子
1.url帶引數/引數
<Route path="/:id">
引數獲取:this.props.match.params.id
2.帶引數跳轉該地址
<Link to={{
pathname:'/home' 路徑名,
query:'' 引數值
state:'' 引數值儲存在state中
}}
a.query傳參 this.props.location.query.xx 貌似重新整理後該引數狀態不會儲存
b.state傳參 this.props.location.state.xx
被Route包裹的元件會有location,match,history等屬性,通過this.props獲取即可
<Route path='/xx' component={元件}
若元件中又有子元件,父元件可屬性方式將history等傳遞給子元件,子元件通過this.props獲取
頁面跳轉
1.被Route包裹的元件,直接this.props.history.push("/xx")
2.普通元件可通過使用withRouter(元件)再this.props.history.push("/xx")
--------------------- 作者:cyyy1223 來源:CSDN 原文:https://blog.csdn.net/cyyy1223/article/details/79318836 版權宣告:本文為博主原創文章,轉載請附上博文連結!