리액트 라우터의 새 탭에서 프로그래밍 방식으로 링크 열기

리액트 라우터의 새 탭에서 프로그래밍 방식으로 링크 열기

리액트 사용 중React Router(리덕스 없음)와 함께 프로젝트에 대한 JS 링크를 프로그래밍 방식으로 열지만 새 탭으로 엽니다.사용하는 것은 알고 있습니다.onClickNode={e => this.props.history.push('/${e.data.node.id}')}원하는 링크로 이동할 수 있지만 같은 탭에서 열리는 것이 문제입니다.또한 JSX를 그 함수에 사용할 방법이 없기 때문에 추가 가능성이 없습니다.<Link>요소.

(리액트 라우터 v4를 사용하고 있습니다)

이 https://stackoverflow.com/a/11384018/7697399의 답변은 저를 도와줬고 완벽하게 작동했습니다.이는 리액트 라우터의 도움 없이도 수행할 수 있습니다.

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

이전 답변과 비슷하지만 창을 열 수 없는 경우에도 오류가 발생하지 않습니다.

function open(url) {
  const win = window.open(url, '_blank');
  if (win != null) {
    win.focus();
  }
}

<Link/>에서 구성 요소react-router-dom사용할 수 있습니다.를 사용하여 새 탭에 소품을 전달할 수 있습니다.

<Link to='/' target="_blank"> 
  <div> Button </div>
 </Link>

새로운 Javascript 구문에서는 다음과 같이 함수를 작성할 수 있습니다.

const openLink = (url) => window.open(url, '_blank')?.focus();

그러면 새 탭에서 URL을 열고 성공하면 해당 URL에 초점을 맞춥니다.탭이 열리지 않으면 오류가 발생하지 않습니다.

다음을 사용하여 경로를 프로그램적으로 얻을 수 있습니다.useHref후크(Docs)이게 뭐냐면<Link>컴포넌트는 내부적으로 사용됩니다.그런 다음 다음을 사용하여 새 탭에서 열 수 있습니다.window.open그러면 자동으로 기본 이름 등이 추가됩니다.

let href = useHref(to);
window.open(href, '_blank');

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