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  版權宣告：本文為博主原創文章，轉載請附上博文連結！