8、Link 標籤 to 屬性為物件時（路由資訊傳值）

參考 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 跳轉；