我的一個React路由嵌套（多級路由），路由傳參之旅

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

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

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

 

（1）新建一個demo：

 

這里使用了render方式在一個文件中模擬了多個組件的效果 代碼只為講解使用在真實開發中盡量不要這樣寫代碼的。

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

 

 

 

 

 

 

 

 代碼提供給大家

import React, { Component } from 'react'

import{
    HashRouter as Router,//路由會帶#號
    Route,
    NavLink
} from "react-router-dom"

export default class NewRoute extends Component {
    render() {
        return (
            <div>
                <Router>
                    <Route path="/" render={()=>{
                        return(
                            <div>
                                <p>這行顯示的是"/"的組件</p>
                                <Route path="/a" render={()=>{
                                    return(
                                        <div>
                                            <p>這樣顯示的是"/a"的組件</p>
                                            <Route path="/a/b" render={()=>{
                                                return(<p>這行顯示的是"/a/b"的組件</p>)
                                            }}></Route>
                                        </div>
                                    )
                                }}></Route>
                            </div>
                        )
                    }}></Route>
                </Router>
            </div>
        )
    }
}

 

 

（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>

<Link to={
{
pathname:"/a",
hash:'#name=zhang',
query:{name: 'zhang'},
state:{name:'zhang'}
 }
}>點擊跳轉
 </Link>

再次給各位姥爺磕頭！

 

(8)hash(#)

正常的path：

 

頁面給到值：

此時的控制台打印this

 

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

● 打印結果是地址欄包括#號及后面所有的值 

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

 

(9)search(?)

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

正常的path：

界面：

 

控制台：

 

 

（10）state

代碼是這樣的：

 

 頁面是這樣的：

 

 控制台：

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

 

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