React Router の Link コンポーネントを使いこなす

Link って何？

React Router の <Link> コンポーネントは、SPAにおける「画面遷移のためのリンク」を実現するためのものです。<a> タグのように見た目はリンクですが、ページ全体をリロードせずにURLだけを変えて、スムーズに別の画面へ移動してくれます。

import { Link } from 'react-router-dom';

function Home() {
  return <Link to="/about">Aboutページへ</Link>;
}

これだけで、URLが /about に変わり、<Route path="/about" /> にマッチしたコンポーネントが表示されます。

---

<a> タグじゃダメ？

普通の <a> タグでもリンクは作れますが、以下の問題があります。

• ページ全体がリロードされる → SPA のメリットが台無し
• 状態やコンテキストが失われる → せっかく保持してた値がリセットされる
• React Router の制御外になる → ルーティングが複雑化

Linkコンポーネントを使えば、React Router が内部的に履歴（History API）を操作してくれるので、滑らかでストレスのない画面遷移が実現できます。

---

基本的な使い方

まずは React Router をインストールしておきます。

npm install react-router-dom

ルーティング設定例

// App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

リンクを使う

// pages/Home.tsx
import { Link } from 'react-router-dom';

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/about">Aboutページへ移動</Link>
    </div>
  );
}

これだけで、Aboutページへ移動 をクリックすると /about に遷移します。

---

応用的な使い方

パラメータ付きのリンク

URLに動的なパラメータを渡すこともできます。

import { Link } from 'react-router-dom';

const userId = '123';

<Link to={`/user/${userId}`}>ユーザーページへ</Link>

このコードでは、/user/123 というURLに遷移します。

---

オブジェクトで to を指定する

クエリパラメータや状態も一緒に渡せます。

<Link
  to={{
    pathname: '/search',
    search: '?keyword=react',
    state: { from: 'home' }
  }}
>
  検索ページへ
</Link>

内容	説明
pathname	遷移先のパス
search	URLに付けるクエリパラメータ（例：?keyword=react）
state	URLには表示されないけど、リンクと一緒に渡せる任意のデータ

これをクリックすると、以下のようなURLに遷移します。

/search?keyword=react

しかも、「このリンクはどこから来たか（from: 'home'）」という情報もstateとして一緒に渡すことができます。

---

カスタムスタイルや条件付きクラス

Link は className も使えるので、現在のURLに応じてクラスを切り替えることも可能です。
useLocation() フックを使えば、現在のURLのパス情報 を取得できます。

その情報を使って、今表示しているページとリンク先が一致するかをチェック → 一致してたら className を付ける、という仕組みです。

import { useLocation } from 'react-router-dom';

function Menu() {
  const location = useLocation();

  return (
    <Link
      to="/about"
      className={location.pathname === '/about' ? 'active' : ''}
    >
      About
    </Link>
  );
}

---

クリックイベントと組み合わせる

リンクをクリックしたときに「ただ移動するだけ」じゃなくて、

• ユーザーをログアウトさせる
• フォームの内容を保存する
• アラートや確認ダイアログを出す
• 状態をリセットする

など、何か処理をしてからページを移動したい場合はクリックイベントを使って実装することができます。

<Link
  to="/logout"
  onClick={() => {
    console.log('ログアウト処理...');
  }}
>
  ログアウト
</Link>

このコードでは、

• 「ログアウト」リンクをクリックすると onClick の中の処理（console.log）が先に実行される
• そのあとに /logout へ画面遷移する

という動きになります。

---

まとめ

• <a> タグのように見えるけど、裏側で履歴APIを操作
• リロードなしで快適な画面遷移ができる
• パラメータや状態を渡せたり、スタイルも簡単に制御できる