【React】外部リンクに飛ぶ方法【Javascript】

外部のページに飛びたい

ReactでSPAアプリ作成時にReactRouter外の外部のページに飛びたい。 しかし、useHistoryやLinkでは飛べない。

そういう場面に直面して解決したのでその方法をここに記します。

実装方法

リンクで飛ぶ

//現在のタブで開く
<a href="https://www.google.com/">Text</a>
//新しいタブで開く
<a target="_blank" href="https://www.google.com/">Text</a>

何らか処理後に飛ぶ

export const Hoge () => {
  
  現在のタブで開く
  function onClickHandleA () {
    window.location.replace("https://www.google.com/")
  }

  //新しいタブで開く
  function onClickHandleB () {
    window.open("https://www.google.com/", '_blank');
  }

  return (
  <div>
    <div onclick={onClickHandleA }>
      Text
    </div>
    <div onclick={onClickHandleB }>
      Text
    </div>
  </div>
  )
}

参考