React-router(8) Link 태그 to 속성이 객체인 경우(라우팅 정보 전송)

8. Link 태그 to 속성이 객체인 경우(라우팅 정보 전송)

DEMO 주소
참조 6.routeInfo.js
구성 요소 안에서, 모든 구성 요소의 루트 데이터는 각자 독립된 것이다.
이전 분석에서는 다음을 알고 있었습니다.

match 속성의 값으로 이 루트 라벨의 경로를 저장한다.

location 속성의 값, 그 중에서 URL과 path가 다른 루트 구성 요소에서 값은 같다.

그러나 【2】 정확하지 않다. 정확히 말하면 자체의hash,search,pathname 이 세 가지 속성의 값은 같다.
만약 네가 안에 다른 데이터를 추가했다면 결과는 달라졌을 것이다.
예를 들어 링크 탭에는 경로 이동에 사용할 수 있는 속성 to가 있습니다.
일반적으로 다음과 같은 쓰기 방식이 사용됩니다.

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

그러나 to의 값은 다음과 같은 객체를 사용할 수도 있습니다.

<Link to={{
    pathname: `${this.props.match.url}/1`,
    myState: ' '
}}> 1Link>

라우팅 정보가 일치하는 경우(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에 하나의 속성이 추가됩니다.
그러나 다음과 같은 경우에는 이러한 정보가 손실될 수 있습니다.

페이지 새로 고침;

정보가 업데이트되었기 때문에 더 깊은 서브어셈블리에 액세스합니다.

리셋 후 같은 URL을 방문합니다.예를 들어, 당신은 이 URL을 방문했고, 값을 전달받았으며, 페이지를 새로 고치고, 이 URL을 클릭하면 없습니다.같은 URL 점프 때문;