React-router(8) Link 태그 to 속성이 객체인 경우(라우팅 정보 전송)
8. Link 태그 to 속성이 객체인 경우(라우팅 정보 전송)
DEMO 주소
참조 6.routeInfo.js
구성 요소 안에서, 모든 구성 요소의 루트 데이터는 각자 독립된 것이다.
이전 분석에서는 다음을 알고 있었습니다.
그러나 【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에 하나의 속성이 추가됩니다.
그러나 다음과 같은 경우에는 이러한 정보가 손실될 수 있습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
generator-react-webpack이라는 것을 발견했기 때문에 사용해 보았다React 유행하는 것 같지만 무엇을 손에 넣을 수 있는지 잘 모르는 사람 (= 완전히 자신) 되는 것을 발견했기 때문에 readme 등 보면서 조사 조사해 갑니다. 아무 생각 없이 다음을 수행npm install ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
