React RouterのLinkコンポーネントの使い方を完全解説！初心者でもわかるページ遷移の基本
生徒
「Reactでページを切り替えるにはどうすればいいんですか？」
先生
「React RouterのLinkコンポーネントを使うことで簡単にページ遷移ができます。」
生徒
「普通のリンクと何が違うんですか？」
先生
「ページをリロードせずに画面を切り替えられるのが特徴です。それでは詳しく見ていきましょう！」
1. Linkコンポーネントとは
Linkコンポーネントは、React Routerでページ遷移を行うための部品です。
通常のHTMLではaタグを使ってリンクを作りますが、ReactではLinkを使うことで画面を再読み込みせずにページを切り替えることができます。
この仕組みによって、アプリの動きが速くなり、快適に操作できるようになります。
2. Linkの基本的な使い方
Linkコンポーネントは、toという属性を使って移動先を指定します。
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Link to="/">ホーム</Link>
<Routes>
<Route path="/" element={<h1>ホームページ</h1>} />
</Routes>
</BrowserRouter>
);
}
export default App;
toは移動先のURLを表しており、クリックするとそのページが表示されます。
3. 複数のページへ遷移する方法
複数のページを作る場合は、Linkも複数用意します。
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">ホーム</Link>
<Link to="/about">会社情報</Link>
</nav>
<Routes>
<Route path="/" element={<h1>ホーム</h1>} />
<Route path="/about" element={<h1>会社情報</h1>} />
</Routes>
</BrowserRouter>
);
}
このようにすることで、簡単にメニューのようなナビゲーションを作ることができます。
4. aタグとの違いを理解する
aタグを使うとページ全体が再読み込みされます。
一方でLinkは、必要な部分だけを更新するため高速に動作します。
この違いはシングルページアプリケーションにおいて非常に重要です。
5. コンポーネントでLinkを使う
Linkは別のコンポーネントの中でも使うことができます。
function Menu() {
return (
<div>
<Link to="/">トップ</Link>
<Link to="/contact">お問い合わせ</Link>
</div>
);
}
これにより、共通のメニューを簡単に使い回すことができます。
6. Linkの見た目を変更する
Linkは通常のHTMLと同じように見た目を変更できます。
<Link to="/about" style={{ color: "red" }}>
会社情報
</Link>
スタイルを変えることで、ボタンのように見せることも可能です。
7. よくあるミスと注意点
Linkを使う場合は、必ずBrowserRouterで囲む必要があります。
また、toの値がRouteのpathと一致していないと画面が表示されません。
これらの点に注意することで、スムーズにページ遷移が実装できます。
8. Linkを使うメリット
Linkを使うことでページ遷移が高速になり、ユーザーの操作が快適になります。
また、Reactらしいシンプルなコードでルーティングを実現できる点も大きなメリットです。
初心者の方は、まずLinkとRouteの関係を理解することが重要です。
