Zenn
Open1

Linkの落とし穴について

mitsuyoshimitsuyoshi

target="_blank"で外部リンク遷移ができなかった。

<Sample onClick={e.preventDefault}>


const Sample = () => {
return (
        <Link href={meetingUrl} target="_blank">
            外部サイトへリンク
        </Link>
    )
}

上記のコードで起きていること。

  1. リンクをクリックすると外部リンクに遷移するイベントが発火。
  2. イベントが親に伝播。
  3. 親のe.preventDefaultによってイベントが阻止される。

一方で...

<Sample onClick={e.preventDefault}>

const Sample = () => {
return (
        <Link href={meetingUrl} >
            外部サイトへリンク
        </Link>
    )
}

target="_blank"を削除すると、同一ページ内では遷移できる。

これは処理のタイミングの問題だった。

  • 通常の遷移：即座に実行される → preventDefault()の前に完了
  • 新しいタブ：処理に若干の遅延 → preventDefault()に阻止される

外部リンクは別タブで開きたいので

e.stopPropagationを追加すれば解決した

<Sample onClick={e.preventDefault}>

const Sample = () => {
return (
        <Link href={meetingUrl} target="_blank" onClick={e.stopPropagation}>
            外部サイトへリンク
        </Link>
    )
}

上記の変更により

  1. リンククリックでイベントが発火。
  2. stopPropagationにより、イベントが親に伝播しなくなり、preventDefaultによる阻止が起きない。