React-Router 새 탭에서 링크 열기

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>

간단한 방법은 'to'속성을 사용하는 것입니다.

<Link to="chart" target="_blank" to="http://link2external.page.com" >Test</Link>

이것은 나를 위해 잘 작동합니다

<Link to={`link`} target="_blank">View</Link>

새 탭에서 URL을 열려면 아래와 같이 링크 태그를 사용할 수 있습니다.

<Link to="/yourRoute" target="_blank">
    Open YourRoute in a new tab
</Link>

그것의 좋은는 것을 명심해야 할 <Link>요소가로 변환됩니다 <a>요소, 그리고에 따라 문서 라우터-DOM의 반응 은 등 제목, ID, 클래스 이름으로 그것을 싶습니다, 당신은 어떤 소품을 전달할 수 있습니다

target = "_ blank"는 react-router를 사용할 때 새 탭에서 열기에 충분합니다.

예 : <Link to={/admin/posts/error-post-list/${this.props.errorDate}} target="_blank"> View Details </Link>