在上一篇react路由之旅中，我們簡單地配置了react，進行了react路由及相關知識的學習，引入以及實現一個區域性跳轉的功能，接下來就是深入學習路由的巢狀以及傳參，這是工作中主要用要的。

我的react已經配置了redux（見我的redux之旅），所以這是在引入的外掛裡做的演示。

從App元件跳轉到NewRoute元件(需要簡單的路由跳轉，點選自己預習)

（1）新建一個demo：

這裡使用了render方式在一個檔案中模擬了多個元件的效果 程式碼只為講解使用在真實開發中儘量不要這樣寫程式碼的。

這段程式碼中，我們模擬了3層路由，路徑和介面如下：

 程式碼提供給大家

 1 import React, { Component } from 'react'
 2 
 3 import{
 4     HashRouter as Router,//路由會帶#號
 5     Route,
 6     NavLink
 7 } from "react-router-dom"
 8 
 9 export default class NewRoute extends Component {
10     render() {
11         return (
12             <div>
13                 <Router>
14                     <Route path="/" render={()=>{
15                         return(
16                             <div>
17                                 <p>這行顯示的是"/"的元件</p>
18                                 <Route path="/a" render={()=>{
19                                     return(
20                                         <div>
21                                             <p>這樣顯示的是"/a"的元件</p>
22                                             <Route path="/a/b" render={()=>{
23                                                 return(<p>這行顯示的是"/a/b"的元件</p>)
24                                             }}></Route>
25                                         </div>
26                                     )
27                                 }}></Route>
28                             </div>
29                         )
30                     }}></Route>
31                 </Router>
32             </div>
33         )
34     }
35 }

（2）用子元件形式實現上面的demo：

效果如下：

如果你對現在的頁面效果不滿意，可以新增多個link，並且在Switch中新增多個路由，真實還原網站。

 (3)實際開發中：

App.js中程式碼:

indexPage.js中程式碼：

userPage.js中的程式碼： 

 這是一套基本的業務流程，不僅涉及到介面跳轉，巢狀，還有網頁不存在的重定向，它們之間是向下呼叫的關係 App.js中 path = / 會呼叫 indexPage.js indexPage.js path = /user 會呼叫 userPage.js userPage.js path = /user/one 會呼叫最終顯示元件。

（4）我們列印一下shopPage的this，看看裡面有什麼：

想得到當前的路徑，用this.props.match.url是個不錯的選擇

（5）多級路由中地址的拼接：

拼接的作用，可以隨意切換元件間的呼叫，比如隨時在/b之前再插入一層地址，也可以直接整個元件移動到其它路徑之下。

我們現在在這裡呢，複製了一份userPage介面，命名為userPage1，把他的路徑命名為c，並把b元件引入了userPage和userPage1：

userPage元件：

userPage1元件：

此時此刻，在各自的路徑下開啟b元件的截圖：

（6）我們的元件，有時候只是一個模板，需要接受傳值，才能起到自己的作用，然後就說一下元件傳值：

路由傳值的常用方式：params（/）、hash(#)、search(?)、state

（7）params（/）

● 上面程式碼中是在定義路由元件中

● 注意path地址中斜槓後面 :id 

● 其中：冒號可以理解為即將宣告一個變數

● 變數的名字是id

拓展內容，引數正則匹配

● /:id?後面?號表示可有可無

● /name_:id前面加name必須匹配/name_XXX

● /:id(\d+)括號中的內容為正則，這裡表示:id必須是數字才會匹配

取值需要在對應的component定義的元件 UserPage中使用 this.props.match.params.id 位址列輸入上圖的地址（/id001）取到的結果就是 id001

 在此為我的粗心表示歉意，直到我最後用state傳值菜發現，沒有給大家講Link，而是直接在瀏覽器的網址直接寫了資料，然後讓大家看的控制檯，僅僅是取了一個數據，這次重新編輯給大家補上Link的程式碼，大家心裡想象截圖上有一個Link就好了，當然，沒有link，直接在網址里加入資料是沒錯的，只不過心裡膈應，怕大家看不懂。如果你要把這行程式碼補到 元件，記得外面包一層Router

<Link to={ ' /a/ ' + ' id001 ' }  activeClassName='active'>點選跳轉</Link>

1 <Link to={
2 {
3 pathname:"/a",
4 hash:'#name=zhang',
5 query:{name: 'zhang'},
6 state:{name:'zhang'}
7  }
8 }>點選跳轉
9  </Link>

再次給各位姥爺磕頭！

(8)hash(#)

正常的path：

頁面給到值：

此時的控制檯列印this

● 在regPage.js頁面中直接使用 this.props.location.hash 取值

● 列印結果是位址列包括#號及後面所有的值 

● 該方式需要在對鍵值對進行處理相對比較麻煩

(9)search(?)

用法優缺點問題與上面的hash十分類似

正常的path：

介面：

控制檯：

（10）state

程式碼是這樣的：

 頁面是這樣的：

 控制檯：

在regPage.js元件中通過 this.props.location.state取值

總結：這次寫部落格經歷了一次大改和一次補充，總的來說我這個人是懶的，克服困難，加油吧

&n