react-router-dom
阿新 • • 發佈:2018-08-20
ati pro 地址 mat prop () outer style ops
.js路由跳轉:
1.被Route包裹的組件,直接this.props.history.push("/xx");
在構造函數中
constructor(props) {
super(props);
}
其他需要跳轉的地方this.props.history.push("/xx");
2.普通組件可通過使用withRouter(組件)再this.props.history.push("/xx")
import React from "react"; import {withRouter} from "react-router-dom"; class MyComponent extends React.Component { ... myFunction() {this.props.history.push("/some/Path"); } ... } export default withRouter(MyComponent);
常規導入
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獲取
匹配:
使用 exact 關鍵字會精確匹配到該路由下,否則則匹配到滿足該路由的路由下。
react-router-dom