5.0.1版本的react-router-dom路由傳參以及路由表的配置和接收頁面的接受


 1 //第一種  通過問號傳參
 2 //發送
 3 this.props.history.push("/detail?id="+item.downurl)
 4 //路由表配置
 5 <Route path="/detail" component={Detail} exact></Route>
 6 //接收  可以獲取到?后面的方法
 7 this.props.location.search 
 8 無弊端 刷新參數也有
 9 
10 
11 //第二種 通過/傳參  也就是動態路由!!!
12 //發送
13 this.props.history.push("/detail/"+8)
14 //路由表配置
15 <Route path="/detail/:id" component={Detail} exact></Route>
16 //接收 可以獲取到關於id的一個對象
17 this.props.match.params 
18 無弊端 刷新參數也有
19 
20 //第三種通過對象發送跳轉路由
21 this.props.history.push("/detail",{downurl:999});
22 //路由表配置
23 <Route path="/detail" component={Detail} exact></Route>
24 //接收  可以獲取到一個關於downurl的對象
25 this.props.location.state
26 弊端!!! 
27 通過HashRouter設置的路由可以跳轉但是訪問不到參數!!!
28 
29 
30 //通過標簽跳轉加傳參
31 第一種單純的跳轉不傳參
32 <Link to="/main/list"><Link>
33 
34 第二種傳參數跳轉
35 <Link to={{
36             pathname:"/detail",
37             search:"?id=1",  //獲取this.props.location.search 
38             state:{fromDashboard:11}//獲取this.props.location.state 
39             }}>跳起來啊啊啊啊
40   </Link>
41             
42   //路由表配置
43 <Route path="/detail" component={Detail} exact></Route>

 

     不足知足歡迎補充嘍~~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM