React-router（8）Link 标签 to 属性为对象时（路由信息传值）

8、Link 标签 to 属性为对象时（路由信息传值）

DEMO地址

参考 6.routeInfo.js

在组件里，每个组件的路由数据，都是各自独立的。

在之前分析中，已知：

1. match 属性的值，存储的是该 Route 标签的路由；
2. location 属性的值，其中 url 和 path 不同 Route 组件中，值是相同的；

但【2】并不准确，准确的说，自带的 hash ， search ， pathname 这三个属性的值，是相同的；

假如你在里面添加了其他数据，那么结果就有所不同了。

例如 Link 标签，他有一个属性 to，可以用于路径跳转。

比较常见的是以下这种写法：

<Link to={`${props.match.url}/`}>子路由</Link>

但是，to 的值，也可以用对象，例如这样：

<Link to={{
    pathname: `${this.props.match.url}/1`,
    myState: '这是我自定义的变量'
}}>示例1</Link>

当路由信息匹配时（参照DEMO）：

1、父组件的路由信息为：

{
    "match": {
        "path": "/RouteInfo",
        "url": "/RouteInfo",
        "isExact": false,
        "params": {}
    },
    "location": {
        "pathname": "/RouteInfo/1",
        "search": "",
        "hash": ""
    },
    "history": {
        "length": 9,
        "action": "POP",
        "location": {
            "pathname": "/RouteInfo/1",
            "search": "",
            "hash": ""
        }
    }
}

2、被传值的子组件的路由信息：

{
    "match": {
        "path": "/RouteInfo/1",
        "url": "/RouteInfo/1",
        "isExact": true,
        "params": {}
    },
    "location": {
        "pathname": "/RouteInfo/1",
        "myState": "这是我自定义的变量",
        "search": "",
        "hash": ""
    },
    "history": {
        "length": 24,
        "action": "PUSH",
        "location": {
            "pathname": "/RouteInfo/1",
            "myState": "这是我自定义的变量",
            "search": "",
            "hash": ""
        }
    }
}

可以看到，被传值的子组件的路由信息，location 会多了一个属性。

但是请注意，以下几种情况会导致失去这些信息：

1. 刷新页面；
2. 访问更深一层的子组件（因为信息被更新了）；
3. 刷新后，访问相同的 url。举例来说，你访问了该 url，传值了也收到了，然后刷新页面，再点击该 url，是没有的。原因是相同 url 跳转；