React-router（4）props 路由信息

4、props

DEMO地址

參考 3.props.js

react-router 的路由信息，都存儲在組件的 props 裏。

之所以是存在 props 裏，是因爲我們寫在父組件裏的，是 Route 標籤，我們需要顯示的組件，是作爲 Route 標籤的屬性而傳進去的。

顯然，而我們的組件，作爲 Route 標籤的子組件而存在，因此，路由數據通過 props 傳給我們的組件，這也是理所當然的事情了。

因此，可以得出幾個結論：

1. 只有 Route 標籤裏傳入的組件，才能通過 props 屬性讀取路由屬性（除非你自己手動傳給子組件）；
2. 每個能讀取路由屬性的組件，其 match 屬性，獲得的是當前級別的路由的屬性（例如本級路由的 match.url = '/Params/2'，那麼上級路由的 match.url = '/Params'；

其他論斷：

1. match.isExact：假如當前路徑和 route 標籤裏的 path 完全相同，該值爲 true，否則爲 false（例如當匹配到次級路由時，那麼上級路由的這個屬性則爲 false，次級當前的爲 true）（當 url 爲 / 時顯示該組件，/a 不顯示組件，需要使用這個）；
2. match 屬性的值，是根據當前路由（組件所在的 route 標籤）的層級而決定的；
3. location 屬性的值，在每個能讀取到這個屬性的路由組件，都是相同的；
4. 類似 /1?a=1 這樣的路徑，其中 ?a=1，是通過 location.search 來獲取；
5. 路由信息，當路由變化時，是會跟着一起更新的，但並不是實時更新的；

對於第五條，進行詳細解釋：

假如我通過點擊 <Link> 標籤，讓路由從 /a 跳轉到 /b ，也就是說，從顯示 A 組件到顯示 B 組件。會發生以下事情：

【1】如果 Link 標籤裏有一個 onClick 事件，那麼顯然可以拿到 location 屬性的值。

在該事件執行的這段時間，props.location 的值，是 url 更新之前的。

並且，window.location（也就是原生的），其 url 也是更新之前的；

【2】那什麼時候可以獲取到更新之後的 url 呢？

答案是路由更新後，所對應的那個組件，在掛載的時候，生命週期處於 componentWillMount 時，可以獲取到最新的 url。

因此如果需要第一時間在父組件內拿到更新後的值，那麼需要在父組件，將回調函數傳給子組件纔可以實現。

實現原理：可以參考 17、組件通信，父組件將回調函數傳給表單組件，然後表單組件負責執行這個回調函數，並將修改後的值作爲參數傳給函數。

具體寫法參考後面章節。

DEMO如下：

【1、先例行引入】

import React from "react";
import {HashRouter as Router, Link, Route} from 'react-router-dom'

【2、兩個子組件，分別點擊顯示和直接顯示在頁面上】

class First extends React.Component {
    constructor() {
        super()
        this.log = this.log.bind(this)
    }

    render() {
        return <button onClick={this.log}>點擊顯示路由信息，點擊後請查看控制檯</button>
    }

    log() {
        console.log(this.props)
    }
}

const Second = props => <div>
    函數組件顯示路由信息：（這裏是本級 Route 標籤的部分信息）
    <pre>{JSON.stringify(props, undefined, 4)}</pre>
</div>

【3、父組件，負責對比其 props 與子組件不同】

class RoutingNested extends React.Component {
    constructor() {
        super()
    }

    render() {
        return <div>
            <h3>React-router 參數設置</h3>
            <h3>注意，這裏存的不是組件裏的路由信息，而是上一級 Router 標籤的路由信息</h3>
            <h3>路由數據被存儲在 this.props 裏，這是其中部分屬性 <pre>{JSON.stringify(this.props, undefined, 4)}</pre></h3>
            <Router>
                <div>
                    <li>
                        <Link to={`${this.props.match.url}/1?a=1`}
                              onClick={() => {
                                  console.log('Link 標籤（跳轉到/1）的 onClick 事件', this.props.location)
                              }}>
                            示例1
                        </Link>
                    </li>
                    <li>
                        <Link to={`${this.props.match.url}/2`}
                              onClick={() => {
                                  console.log('Link 標籤（跳轉到/2）的 onClick 事件', this.props.location)
                              }}>
                            示例2
                        </Link>
                    </li>
                    <hr/>

                    <Route path={`${this.props.match.url}/1`}
                           component={First}/>
                    <Route path={`${this.props.match.url}/2`} component={Second}/>
                </div>
            </Router>
        </div>
    }
}

具體示例參照 DEMO 裏的 3.props.js