[reactjs] React-Router 새 탭에서 링크 열기

Program / 글쓴이

React Router 가 새 탭에서 링크를 열 도록하는 방법이 있습니까? 나는 이것을 시도했지만 작동하지 않았습니다.

<Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link>

onClick="foo"위와 같이 링크 에 추가하여 플러 프 할 수 있지만 콘솔 오류가 발생합니다.

감사.

답변

링크 구성 요소에는 소품이 없다고 생각합니다.

태그를 생성하고 Navigation mixin의 makeHref 메소드를 사용하여 URL을 생성하는 다른 방법이 있습니다.

<a target='_blank' href={this.makeHref(routeConsts.CHECK_DOMAIN, {},
   { realm: userStore.getState().realms[0].name })}>
        Share this link to your webmaster
</a>

답변

React Router 버전 5.0.1 이상에서는 다음을 사용할 수 있습니다.

<Link to="route" target="_blank" onClick={(event) => {event.preventDefault(); window.open(this.makeHref("route"));}} />

답변

다음 옵션을 사용할 수 있습니다.

 // first option is:-
    <Link to="myRoute" params={myParams} target="_blank">

 // second option is:-
    var href = this.props.history.createHref('myRoute', myParams);
    <a href={href} target="_blank">

 //third option is:-
    var href = '/myRoute/' + myParams.foo + '/' + myParams.bar;
    <a href={href} target="_blank">

리 액트 라우팅으로 새 탭에서 열려면 세 가지 옵션 중 하나를 사용할 수 있습니다.

답변

대상으로 “{}”를 사용할 수 있습니다. 그러면 jsx가 울지 않습니다.

<Link target={"_blank"} to="your-link">Your Link</Link>

답변

외부 링크의 경우 Link 대신 achor를 사용하십시오. 

<a rel="noopener noreferrer" href="http://url.com" target="_blank">Link Here</a>

답변

react_router 1.0부터 소품이 앵커 태그로 전달됩니다. 직접 사용할 수 있습니다 target="_blank". 여기에서 논의 : https://github.com/ReactTraining/react-router/issues/2188

답변

제 경우에는 다른 기능을 사용하고 있습니다.

함수

 function openTab() {
    window.open('https://play.google.com/store/apps/details?id=com.drishya');
  }

  <Link onClick={openTab}></Link>