1. 程式人生 > >react-router-dom

react-router-dom

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