5、引數

參考 4.params.js

React路由取引數，有兩種：

1. ?a=1 ：這種屬於 search 字串，在 location.search 裡取值；
2. /a/123 ：這種需要從 match.params裡取值；

但無論哪種，路由獲取到的值，是跳轉後的那一刻的值，而不是實時更新的最新值。

具體來說：

1. 假如 Link 標籤跳轉路徑實時繫結輸入框的一個值（假如值是 abc），這個值作為引數傳遞；
2. 點選跳轉後，子元件讀取到當前傳的值 abc；
3. 此時修改【1】中輸入框的值為 def；
4. 請問子元件讀取到的值此時是多少？abc 還是 def；
5. 答案是 abc；
6. 原因是當前路徑是 abc
   ，這個值讀取到的是當前路徑的值，而不是將要跳轉的路徑的值，因此不是實時更新的（顯然，也不應該是實時更新的）；

手動修改位址列的 url：

1. 假如手動修改 url 為 ggg，那麼請問讀取到的值是多少？
2. 我還真去試了一下。答案是除非你修改後，按回車跳轉路徑，會讀取到最新的；
3. 否則，依然保持為修改前 abc；
4. 即使你重新觸發 render 方法（比如修改 state 來實現），依然獲取到的是 abc ，而不是 ggg；

獲取最新值：

1. 如果你想要獲取到新值，那麼請重新點選跳轉（綁定了新的 url 的 Link 標籤）即可；
2. 重新跳轉後（假如跳轉到同一個頁面），url 改變了，那麼元件會重新載入麼？
3. 答案是否定的，如果跳轉到同一個元件，僅是引數改變，那麼元件是不會重新載入的，即元件內的資料保持之前不變，只有傳遞的引數改變了（生命週期函式也不會重新執行）；

比較特殊的，有關生命週期：

1. 元件的生命週期函式，只會在第一次掛載的時候執行，如果前後跳轉是同一個元件，那麼該元件的生命週期函式不會重複執行；
2. 但 state 的生命週期，會多次執行（只要父元件的 state 改變了，子元件的相關函式會被執行）；
3. 由於路由資訊是通過 props 傳值的，因此也會多次觸發；
4. 不過沒有影響，傳的值依然是舊值（因為路由資訊沒變）；
5. 但假如你在 state 生命週期函式裡做了一些什麼事情，可能需要注意一下會不會帶來不良影響（雖然一般不會）；

示例：

【例行引入和子元件】

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

const First = props => <div>
    第一個元件讀取引數（location.search） {props.location.search}
</div>

const Second = props => <div>
    第二個元件讀取引數（match.params.myParams） {props.match.params.myParams}
</div>

【父元件，負責配置路由和傳值】

class RoutingNested extends React.Component {
    constructor() {
        super()
        this.state = {
            firstNumber: 0,
            secondNumber: 0
        }
        this.changeFirst = this.changeFirst.bind(this)
        this.changeSecond = this.changeSecond.bind(this)
    }

    render() {
        return <div>
            <h3>4、React-router 傳參</h3>
            <h3>請在對應的跳轉標籤裡，輸入你想要傳的值</h3>
            <Router>
                <div>
                    <li>
                        <Link to={`${this.props.match.url}/1?a=${this.state.firstNumber}`}
                              onClick={() => {
                                  console.log('Link 標籤（跳轉到/1）的 onClick 事件', this.props.location)
                              }}>
                            示例1
                        </Link>
                        <input type="text" value={this.state.firstNumber} onChange={this.changeFirst}/>
                    </li>
                    <li>
                        <Link to={`${this.props.match.url}/2/${this.state.secondNumber}`}
                              onClick={() => {
                                  console.log('Link 標籤（跳轉到/2）的 onClick 事件', this.props.location)
                              }}>
                            示例2
                        </Link>
                        <input type="text" value={this.state.secondNumber} onChange={this.changeSecond}/>
                    </li>
                    <hr/>

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

    changeFirst(e) {
        this.setState({
            firstNumber: e.target.value
        })
    }

    changeSecond(e) {
        this.setState({
            secondNumber: e.target.value
        })
    }
}