はじめに
Reactでアプリを作っている際に、ページ遷移のために
<a> と <Link> のどちらを使えばいいか迷うことがありました。
この記事では、使い分けを簡単にまとめたいと思います。
<a> を使うとどうなるのか？
通常のHTMLの <a> タグはブラウザに「新しいページを開け」と命令します。
<a href="/map">Go to Map</a>
この場合：
ページ全体がリロード（再読み込み）されます。
Reactアプリの状態（state）がリセットされます。
アプリが再起動するような動作になります。
つまり、SPA（Single Page Application）の「速さ」や「なめらかさ」が失われます。
<Link> を使うとどうなるのか？
React Routerが提供する コンポーネントは、
「ページ遷移をJavaScript側で処理」してくれます。
import { Link } from "react-router-dom";
<Link to="/map">Go to Map</Link>
この場合：
ページはリロードされずにコンポーネントが切り替わる
Reactの状態（state）も保持されたまま
遷移が高速でスムーズ