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タグと違いがなさそうである。