在上一篇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取值