JavaScript
reactjs

React.jsでaタグとLinkタグの相違点メモ

More than 1 year has passed since last update.

HTML5のaタグとReactのLinkタグどっちともリンクを描画することができるが、動きの違いをメモする。

1. リンク先を省略し、onClick処理で実装したい場合

aタグ Linkタグ
href属性の記載を除く場合、ロールオーバー表現ができない。
ロールオーバー表現を維持するために、href=""の記載が必要になる。
hrefとto属性の記載は不要。
onClickハンドルでe.preventDefault();の呼び出しが必要。 onClickハンドルのe.preventDefault()の呼び出しが不要。

*2. 外部リンクを開きたい場合

aタグ Linkタグ
target="_blank"設定ありの場合、外部リンクが新タブで開く target="_blank"設定ありの場合、外部リンクが新タブで開く
target="_blank"設定なしの場合、外部リンクが今のタブで開く target="_blank"設定なしかつto属性を設定する場合、今のタグで外部リンクのドメインを除いたリクエストURLを今のドメインでアクセスしてしまう。例:locationがhttp://localhost/req1の状態で外部リンクhttp://google.co.jp/aaa/bbbをクリックすると、http://localhost/aaa/bbに飛んでしまい、該当ルートの存在しないエラーがwebコンソールに出力される。

3. Linkタグのhref属性
  Linkタグで基本的にto属性を使用すべきですが、hrefタグの利用も可能である。その時、普通のaタグと違いがなさそうである。