React-router（5）params 路由传参

5、参数

DEMO地址

参考 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
        })
    }
}