React-router（4）props 路由信息

港控/mmm° 2022-05-30 04:09 352阅读 0赞

### 4、props ###

[DEMO地址][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、组件通信][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`

[DEMO]: https://github.com/qq20004604/react-demo/blob/master/react-router/src/3.props.js
[17]: https://github.com/qq20004604/react-demo#17%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1