리액트 라우터는 상대 링크를 지원합니까?

리액트 라우터는 상대 링크를 지원합니까?

다음 URL에 있습니다.

/path1/path2

그 후, 다음과 같이 입력합니다.

<Link to="path2/path3" />

이 코드를 사용하면 주소 표시줄의 주소가 다음과 같이 변경됩니다.

/path1/path2/path3

효과가 있었던 것 같다: 마지막까지 갔다/거기에 새로운 경로를 추가했습니다.그러나 실제로는 주소 표시줄의 URL을 변경하는 동안에는 탐색이 수행되지 않습니다.

링크에 절대 URL을 지정해야 할 것 같습니다.

react-param v4의 상대 경로가 지원됩니다.그history라이브러리는 '브라우저처럼' 상대 경로를 해결하여

<Link to="two" />

또는

history.push({ pathname: '..', search: 'foo=bar' });

url에서site.com/path/one로 리다이렉트 합니다.site.com/path/two그리고.site.com/three?foo=bar.

하지만NavLink는, 상대 패스명에서는 동작하지 않습니다.이는 상대 패스를 해결할 수 없기 때문입니다(이는 그다지 중요하지 않습니다).단, 커뮤니티 패키지는 몇 가지 있습니다만, 테스트해 본 적은 없습니다.

아니면, 그리고 이게 내가 하는 일이니까, 넌 그걸 얻을 수 있어.match부모 루트로부터의 오브젝트(또는 컨텍스트로부터의 오브젝트)router.route.match)를 사용하여 친척을 구축합니다.toNavLink:

<NavLink to={`${match.url}/three`} />

이렇게 하면 컴포넌트가 부모 루트로부터 독립적으로 동작할 수 있습니다.

지원되지 않지만 절대 경로를 쉽게 생성할 수 있습니다.

<Link to={this.props.location.pathname + '/path3'}>

API 매뉴얼에 따르면 링크는 절대 링크여야 합니다.

그to의 특성Link로케이션 기술자여야 합니다.이것은 문자열(명시적으로 다음과 같이 기술되어 있는 경우) 중 하나입니다.

상대 경로가 지원되지 않습니다.

) 또는 를 가진 오브젝트pathname(정의상) 절대적인 특성도 있습니다.

관련 링크에 대해 논의하는 미해결 문제가 있습니다.이것은 향후 상대 경로가 지원될 가능성이 있음을 나타내는 것으로 보입니다.

여기에 기재된 내용은 모두react-router버전 2.x 이후

네, 리액트-라우터-상대 링크 라이브러리를 사용합니다.리액션 라우터의 원작자 중 한 명인 라이언 플로렌스에 의해 쓰여졌다.

이 예제를 사용하려면 다음을 사용합니다.

{ RelativeLink } = require 'react-router-relative-links'
...
<RelativeLink to="./path3">My link text</RelativeLink>

실제로 리액트 라우터는 상대 링크를 지원합니다.

/clients/invoice/123과 같은 URL을 지정하면 다음과 같이 동작합니다.

https://github.com/ReactTraining/react-router/issues/5127

또,this.props.match.url왜냐하면match오브젝트에는url현재 로드된 경로(현재 페이지)인 개체입니다.

결국 쇠사슬을 묶을 수 있다./path1/path2이렇게 동적인 상대 경로를 구축해서this.props.match.url + /path1/path2

예:

<Link to={{ pathname: this.props.match.url + /path1/path2 }}>Path name</Link>

언급URL : https://stackoverflow.com/questions/36312453/does-react-router-support-relative-links