새 탭에서 React-Router 링크 열기

새 탭에서 React-Router 링크 열기

리액트 라우터가 새 탭에서 링크를 열 수 있도록 하는 방법이 있습니까?이거 해봤는데 안 되더라고요.

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

이런 걸 넣으면 부풀릴 수 있어요.onClick="foo"위의 링크와 같은 링크에 접속할 수 있지만 콘솔 오류가 발생할 수 있습니다.

감사해요.

React Router 버전 5.0.1 이후 다음 기능을 사용할 수 있습니다.

<Link to="route" target="_blank" rel="noopener noreferrer" />

Link 컴포넌트는 그에 대한 소품이 없는 것 같습니다.

태그를 만들고 네비게이션 믹스인의 makeHref 메서드를 사용하여 URL을 만듭니다.

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

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

 // 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

<Link to={{  pathname: "https://github.com/vinothsmart/" }} target="_blank" />

이 코드는 a href=" target="_blank"와 같이 작동합니다.

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

기능.

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

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

리액트 라우터나 외부 라이브러리를 Import 할 필요 없이 동작합니다.
또한 Chrome은 팝업을 고려하고 있지 않기 때문에 창이 차단되지 않습니다.

<button onClick={() => window.open("https://google.com.ar")} />

또는 문자열 변수를 사용하는 경우

<button onClick={() => window.open(redirectUrl.toString())} />

시뮬레이션 방법은 'to' 속성을 사용하는 것입니다.

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

이것은 나에게 잘 통한다

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

새 탭에서 URL을 열려면 다음과 같이 Link 태그를 사용합니다.

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

기억하기 좋은 건<Link>요소가 변환되다<a>react-router-dom 문서에 따라 제목, id, className 등 원하는 소품을 전달할 수 있습니다.

target="_blank"리액트 리액트 리액트 리액트 리액트 리액트 리액트 리액트 리액트 리액션을 사용하는 경우

예:

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

저는 이게 제일 좋았어요

onClick={() => window.open("https://facebook.com")}

다른 탭에서 열려는 경우

onClick={() => window.open("https://facebook.com", "_blank")}

팝업, 새 탭 또는 새 창에 관계없이 링크를 여는 기능을 만듭니다.새 탭으로 열립니다.링크 태그로 함수를 호출합니다.경로 이름은 사용 중인 링크 태그이므로 반드시 포함해야 합니다.

let windowObjectReference;
let windowFeatures = "popup";
let instagramUrl = "https://www.instagram.com/?hl=en";

    function openInstagram(){
        windowObjectReference = window.open(instagramUrl, windowFeatures);

언급URL : https://stackoverflow.com/questions/30202755/react-router-open-link-in-new-tab