<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
  </Routes>
</div>

My App

{/ 子ルートの要素が表示される場所 /}

ユーザー一覧

{users.map(user => (
• {user.name} {/ 相対パス: ‘1’, ‘2’ /}

))}

{/ /users/:userId にマッチしたUserDetailが表示される /}

ユーザー詳細: {userId}

{/ ここで Link to=”../” を使う場合 /}
{/ ユーザー一覧に戻る /}
{/ ユーザー一覧に戻る (route相対) /}

ユーザー編集: {userId}

{/*
現在のURLが /users/1/edit の場合:
to=”../” (relative=”path”): /users/1 に遷移 (OK)
to=”../” relative=”route”: このルートは /users/:userId/edit となるはずなので、その親、つまり /users/:userId つまり /users/1 に遷移 (OK)

    ... あれ？同じ挙動になるのでは？
    そうです、単純な ../ の場合は同じになりがちです。
    relative="route" は、Linkがレンダリングされているルートの"定義パス"からの相対パスを解決します。
    例えば、LinkがUserEditコンポーネント内にあり、UserEditが <Route path="edit" element={<UserEdit />} /> にマッチしている場合、
    relative="route" の場合の基準は、その親 Route のパス、つまり /users/:userId となります。
    to="../" は、この /users/:userId から見て一つ上の階層、つまり /users を指します。
    したがって、URLが /users/1/edit の場合、Link to="../" relative="route"> は /users に遷移します。
  */}

  {/* ユーザー詳細に戻るなら /users/1 へ明示的に飛ぶか、
     relative="path" (デフォルト) で to="../" を使うのが分かりやすい
     Link to={`/users/${userId}`}>ユーザー詳細に戻る</Link>
     または
     <Link to="../">ユーザー詳細に戻る</Link> // relative="path" がデフォルト
  */}

  {/* relative="route" の例として挙げられるのは、特定の親ルート内のサブページへのリンクを、
     その親ルートのコンポーネント内から相対的に張る場合などです。
     例えば、ユーザー詳細ページ (/users/:userId) 内で、
     「コメント (/users/:userId/comments)」や「アクティビティ (/users/:userId/activity)」へのリンクを作る場合。
     UserDetailコンポーネントは /users/:userId ルートにマッチしています。
  */}
  {/* UserDetail.js 内での例 */}
  {/* URLが /users/1 の場合: */}
  {/* <Link to="comments">コメントを見る</Link> // relative="path" -> /users/1/comments (OK) */}
  {/* <Link to="comments" relative="route">コメントを見る</Link> // relative="route" -> /users/1/comments (OK) */}

  {/* 違いが出やすいのは、ルート定義のパスと現在のURLの階層が異なる場合など。
     例えば、/users/:userId/edit にマッチするコンポーネント内で、
     そのコンポーネントをレンダリングしている Route の定義パスからの相対で戻りたい場合。
     <Route path="edit" element={<UserEdit />} /> は /users/:userId の子ルート。
     UserEditコンポーネント内で <Link to="../" relative="route"> とすると、
     これは /users/:userId から見て ../ なので /users に遷移します。
  */}
  {/* この例では、/users/1/edit から /users に戻るリンクになる */}
  <Link to="../" relative="route">ユーザー一覧に戻る (relative="route")</Link>

  {/* 一方、<Link to="../"> (relative="path") は、/users/1/edit から見て ../ なので /users/1 に遷移 */}
  <Link to="../">ユーザー詳細に戻る (relative="path")</Link>
</div>

);
}
``relative=”route”は、Linkが配置されているコンポーネントがマッチしているRouteコンポーネントのパス定義（例：path=”:userId”`）からの相対で解決したい場合に利用します。これにより、現在のURLの実際のセグメント数に関わらず、定義上の親ルートへの相対リンクなどを書きやすくなります。

少し理解が難しい機能ですが、ネストされたルーティングを多用する際に、意図した通りの相対パス解決を行うために覚えておくと役立ちます。多くの場合、デフォルトの relative="path" で十分です。

preventScrollReset (boolean) (v6.4+)

このPropsをtrueに設定すると、ナビゲーション時に自動的に行われるウィンドウのスクロール位置リセットを防ぎます。デフォルトはfalseで、新しいページに遷移した際にウィンドウのスクロール位置が最上部（0,0）にリセットされます。

SPAでは、画面の一部分だけが更新されることが多いため、ページ遷移してもスクロール位置が維持されると、ユーザーが混乱したり、コンテンツを見逃したりする可能性があります。そのため、デフォルトでスクロール位置をリセットするのは妥当な挙動です。

しかし、特定のケースではスクロール位置を維持したい場合があります。例えば、長いリストを表示していて、そのリスト内の要素をクリックして詳細ページに遷移し、その後ブラウザの「戻る」ボタンや、リストページに戻るリンクで戻ってきた際に、詳細を見る前にスクロールしていた位置に戻ってほしい、といった場合です。

このようなシナリオでは、preventScrollReset={true} を設定することで、Linkクリック時の自動スクロールリセットを防ぐことができます。ただし、これはそのLinkをクリックした場合に限られます。ブラウザの「戻る/進む」ボタンでの遷移や、useNavigateを使った遷移には影響しません。React Router v6.4からは、スクロール位置の復元はScrollRestorationコンポーネントや、RouterProviderなどの新しいAPIでより柔軟に制御できるようになっています。preventScrollResetは、個別のLinkでの挙動を調整するためのものです。

jsx
<Link to="/long-list" preventScrollReset={true}>
長いリストページに戻る (スクロール位置維持)
</Link>

その他のProps

Linkコンポーネントは、HTMLの<a>タグが受け付ける多くの標準的なHTML属性もPropsとして受け付けます。これらは、生成される<a>要素にそのまま適用されます。

• className: CSSクラスを指定します。スタイリングに利用します。
• style: インラインスタイルを指定します。
• id: 要素のIDを指定します。
• title: ツールチップとして表示されるテキストを指定します。
• onClick: クリックイベントハンドラを指定します。Linkによるナビゲーションの前に実行される処理を記述できます。後述。
• target: リンクを開くウィンドウを指定します (_blankで新しいタブなど)。ただし、_blank以外を指定すると、内部的には<a>タグのデフォルトの挙動（フルリロード）になる可能性があるため、外部サイトへのリンクなど、明示的にフルリロードが必要な場合にのみ使用するのが安全です。SPA内部リンクで新しいタブを開きたい場合は、target="_blank"とrel="noopener noreferrer"をセットで使い、同時にonClickでevent.preventDefault()してReact Routerによる遷移を防ぐ、という工夫が必要になる場合があります（または単に通常の<a>タグを使う）。

“`jsx
console.log(‘Settings link clicked’)}

Settings

“`

これらのPropsを使うことで、Linkコンポーネントの見た目や基本的な挙動をカスタマイズできます。

to Propの詳細な使い方：パスの指定方法

to PropはLinkコンポーネントの核となる部分です。文字列とオブジェクト、そして相対パスの使い分けについて、もう少し詳しく見ていきましょう。

文字列による指定

最もシンプルで直感的な方法です。

• 絶対パス:

  • /: アプリケーションのルートパス。
  • /about: /about という正確なパス。
  • /users/123: /users/123 というパス。パスパラメータを含むルート (<Route path="/users/:userId">) にマッチします。
  • /products?category=electronics#description: クエリストリングとハッシュフラグメントを含むパス。

  文字列でクエリストリングやハッシュを指定する場合、これらは単なる文字列の一部として扱われます。遷移先のコンポーネントでこれらの情報（?category=... や #...）を取得するには、useLocationフックを使用する必要があります。

• 相対パス:

  • /で始まらないパス。現在のURLを基準とします（relative="path"の場合）。
  • ./: 現在のパス自体。
  • ..: 現在のパスの親ディレクトリ。
  • ../..: 現在のパスから2階層上のディレクトリ。
  • edit: 現在のパスに /edit を加えたパス。例: /users/123 -> /users/123/edit

相対パスは、特にネストされたルーティング構造を持つアプリケーションで便利です。コンポーネントがどの親ルートの下にレンダリングされているかを意識せずに、相対的なリンクを張ることができます。ただし、意図しないパスに遷移しないように、現在のルーティング構造と相対パスの解決ルールを正確に理解しておく必要があります。

オブジェクトによる指定

より構造化された方法で遷移先を指定できます。パス、クエリストリング、ハッシュ、そして状態を明示的に分離して指定します。

“`jsx
<Link
to={{
pathname: ‘/search’,
search: ‘?query=react&page=1’,
hash: ‘#results’,
state: { from: ‘homepage’ }
}}

検索結果へ

“`

• pathname: 必須ではありませんが、パスを指定する場合に使用します。省略すると現在のpathnameが使われます。

• search: クエリストリングを指定します。URLSearchParamsオブジェクトを使うと、クエリストリングの構築が容易になります。

  ``jsx
const params = new URLSearchParams({ query: 'react', page: '1' });
<Link
to={{
pathname: '/search',
search:?${params.toString()}` // “?query=react&page=1” を生成
  }}

  検索結果へ (URLSearchParams)
  
  ``searchプロパティの値は文字列である必要があります。URLSearchParams`を使うとオブジェクトから文字列への変換が簡単に行えます。

• hash: ハッシュフラグメントを指定します。ページ内の特定のセクションへのリンクに使用されます。SPAでは、ハッシュが変更されても通常はフルリロードは起きず、ブラウザがそのIDを持つ要素までスクロールします。

• state: 遷移先に任意のデータを渡すことができます。これはURLの一部にはなりませんし、ブラウザのリロードや直接URL入力時には失われます。セッションストレージやローカルストレージを使わずに、一時的に状態を渡したい場合に便利です。例えば、リストページから詳細ページへ遷移する際に、リストページでのスクロール位置やフィルタリング条件をstateとして渡し、詳細ページから戻ってきたときにその状態を復元するために利用できます。

相対パスと絶対パスの使い分け

• 絶対パス (/ で始まる):

  • アプリケーション内の明確な固定パスへのリンクに最適です。
  • ナビゲーションメニュー（ヘッダーやフッターなど）のように、アプリケーション内のどこからでも同じ場所へリンクしたい場合に主に使用します。
  • 現在のURLやコンポーネントの配置に依存しないため、予測しやすいです。

• 相対パス (/ で始まらない):

  • ネストされたルーティング構造を持つアプリケーションで役立ちます。
  • 現在のコンポーネントやURLコンテキストからの相対的な位置へのリンクに使います。
  • 例: ユーザー詳細ページ /users/:userId の中で、そのユーザーに関連するサブページ（例: /users/:userId/posts）へのリンクを張る場合、./posts という相対パスを使えば、userId が何であっても正しく /users/:userId/posts に解決されます。
  • 親ルートに戻る (../) など、階層構造を移動する際に便利です。
  • relative Propsを使うことで、相対パスの基準点を変更できます（上級）。

どちらを使うべきかは、リンクの用途やアプリケーションのルーティング構造によって判断します。一般的には、グローバルなナビゲーションには絶対パスを、特定のセクションやリスト内のアイテムなど、現在のコンテキストに依存するリンクには相対パスを使うことが多いでしょう。

Linkコンポーネントの高度な使い方/考慮事項

基本的な使い方だけでなく、Linkコンポーネントにはいくつかの応用的な使い方や、開発時に考慮すべき点があります。

動的なパスの生成

パスパラメータを含むルート（例: /users/:userId）へのリンクを生成する場合、toPropsの値は動的になります。JavaScriptのテンプレートリテラルや文字列連結を使って、パス文字列を生成します。

jsx
// ユーザーIDをpropsで受け取るリストアイテムコンポーネント
function UserListItem({ userId, userName }) {
return (
<li>
<Link to={`/users/${userId}`}>{userName}</Link>
</li>
);
}

この例では、userIdという変数を使って遷移先のパスを動的に生成しています。これはSPAでよく見られるパターンです。

クエリストリングやハッシュフラグメントの扱い

前述の通り、toPropsのオブジェクト形式を使うことで、クエリストリング(search)やハッシュフラグメント(hash)を明確に指定できます。

“`jsx
// クエリストリング付きのリンク生成
<Link
to={{
pathname: ‘/products’,
search: new URLSearchParams({
category: ‘books’,
sort: ‘title’,
page: ‘2’
}).toString()
}}

書籍の2ページ目へ

“`

遷移先コンポーネントでは、useLocation().search でクエリストリング全体（?category=...）を取得し、それをURLSearchParamsコンストラクタに渡すことで、各クエリパラメータの値を取り出せます。

“`jsx
import { useLocation } from ‘react-router-dom’;

function ProductList() {
const location = useLocation();
const params = new URLSearchParams(location.search);
const category = params.get(‘category’); // ‘books’
const page = params.get(‘page’); // ‘2’

// … データ取得や表示ロジック …
}
“`

ハッシュフラグメントも同様にuseLocation().hashで取得できます。通常、ハッシュはページ内の要素にジャンプするために使われますが、JavaScript側で特別な処理をフックすることも可能です（例: window.addEventListener('hashchange', ...)）。

onClick ハンドラの利用

Linkコンポーネントは、HTMLの<a>タグと同様にonClickPropsを受け付けます。このハンドラは、Linkによるナビゲーションが実行される前に呼び出されます。

これにより、以下のような処理を行うことができます。

• 遷移前の確認: ユーザーに操作の確認ダイアログを表示し、ユーザーが「キャンセル」を選択した場合は遷移を中止する。
• イベントトラッキング: Google Analyticsなどの分析ツールにリンククリックイベントを送信する。
• 簡単な状態更新: リンククリックに関連するアプリケーションの状態を更新する。

onClickハンドラ内で event.preventDefault() を呼び出すことで、デフォルトのLinkによるナビゲーション動作をキャンセルできます。これにより、独自のロジックに基づいて遷移を制御することが可能になります。

“`jsx
function DeleteButtonWithConfirmation({ itemId }) {
const navigate = useNavigate(); // v6のプログラム遷移用フック

const handleClick = (event) => {
// デフォルトのLinkの遷移を防止
event.preventDefault();

// 確認ダイアログを表示
if (window.confirm('本当に削除しますか？')) {
  // ユーザーがOKを選択した場合のみ処理を実行
  console.log(`アイテム ${itemId} を削除します...`);
  // 削除API呼び出しなど...

  // 処理完了後、別のページへ遷移
  // ここで navigate を使うのが一般的です
  navigate('/items');
}
// ユーザーがキャンセルを選択した場合は何もせず、Linkによる遷移も発生しない

};

// 注意: この例では、Linkは削除処理のトリガーとしてのみ使われ、
// to に指定されたパスへの遷移は preventDefault でキャンセルされています。
// 削除ボタンは通常 要素を使うべきですが、Linkに onClick を使う例として示します。
// 削除後の遷移先を Link の to に指定しておき、preventDefault しないケースもあり得ます。
// 例えば、「アイテムを編集」リンクで、未保存の変更があれば確認ダイアログを出す場合など。
// その場合は、確認がOKなら navigate せずにデフォルトの Link 遷移を許可します。

return (
/items/${itemId}/delete} onClick={handleClick}>
アイテムを削除

);
}
``
この例はやや強引ですが、onClickでevent.preventDefault()を使うことでLink`のデフォルト挙動を上書きできることを示しています。より一般的なユースケースとしては、遷移前に確認メッセージを出し、OKならそのままLinkの遷移を実行する、というパターンです。

``jsx
function NavLinkWithConfirmation({ to, children }) {
const handleClick = (event) => {
if (!window.confirm(本当に ${typeof to === ‘string’ ? to : to.pathname} に遷移しますか？`)) {
event.preventDefault(); // OKでなければ遷移をキャンセル
}
// OKの場合は preventDefault を呼び出さないので、Linkのデフォルト遷移が実行される
};

return (

{children}

);
}

// 使用例

設定ページ (確認あり)

“`

このように、onClickハンドラはLinkのクリックイベントにフックして、追加のロジックを実行するために使用できます。

アクティブなリンクのスタイリング (NavLinkコンポーネントの紹介と比較)

多くのナビゲーションでは、現在表示しているページに対応するリンクに特別なスタイル（例: 文字色を変える、下線を引く）を適用したい場合があります。これは「アクティブ状態のスタイリング」と呼ばれます。

Linkコンポーネント自体には、このアクティブ状態を自動的に検出してスタイルを適用する機能はありません。自分で現在のURLとLinkのtoPropsを比較して、条件付きでclassNameやstylePropsを適用する必要があります。これは少し手間がかかります。

“`jsx
import { Link, useLocation } from ‘react-router-dom’;

function Navigation() {
const location = useLocation();
const currentPath = location.pathname;

return (

);
}
“`

React Routerは、このアクティブ状態のスタイリングを簡単に行えるように、NavLinkという別のコンポーネントを提供しています。NavLinkはLinkと非常によく似ていますが、現在のURLがNavLinkのtoPropsとマッチした場合に、特別なクラス名（デフォルトはactive）やスタイルを自動的に適用する機能を持っています。

“`jsx
import { NavLink } from ‘react-router-dom’;

function Navigation() {
return (

);
}
“`

ナビゲーションメニューなど、アクティブ状態のスタイリングが必要な場所では、LinkよりもNavLinkを使用するのが一般的です。NavLinkの詳細は別の記事で解説されることが多いですが、Linkとの関係で知っておくべき重要なコンポーネントです。

外部サイトへのリンク (<a> タグとの使い分け)

React RouterのLinkコンポーネントは、同じSPA内の異なるルートへの遷移を目的としています。外部のWebサイトや、明示的にフルリロードが必要なリソース（例: PDFファイルへのリンク）へのリンクを張りたい場合は、HTMLの標準的な<a>タグを使用するべきです。

“`jsx
{/ SPA内部の別ルートへのリンク /}
内部ページへ

{/ 外部サイトへのリンク /}
Googleへ

{/ ファイルダウンロードへのリンク /}
資料をダウンロード
“`

Linkコンポーネントに外部URL (http://... や https://...) をtoPropsとして指定した場合、React Router v6では、内部的に標準の<a>タグとしてレンダリングされ、通常のブラウザ遷移（フルリロード）が発生します。しかし、これはLinkの本来の用途ではないため、明示的に<a>タグを使用する方が意図が明確で、混乱を防ぐことができます。

アクセシビリティ

リンクはWebサイトのナビゲーションの重要な要素であり、アクセシビリティに配慮することが重要です。Linkコンポーネントは最終的に<a>タグとしてレンダリングされるため、<a>タグに適用されるアクセシビリティの原則はそのまま適用されます。

• リンクテキスト: リンクのテキストは、リンク先の内容を明確に伝えるものであるべきです。「ここをクリック」のような漠然としたテキストは避けるべきです。
• ARIA属性: 必要に応じて、aria-labelなどのARIA属性を使用して、スクリーンリーダーユーザーに追加の情報を提供できます。

jsx
<Link to="/settings" aria-label="設定ページへ移動">
<SettingsIcon /> {/* アイコンだけのリンクの場合 */}
</Link>

適切なリンクテキストとARIA属性を使用することで、キーボードユーザーやスクリーンリーダーユーザーを含むすべてのユーザーがアプリケーション内を容易にナビゲートできるようになります。

Linkとその他のナビゲーション手段の比較

React RouterにはLink以外にもナビゲーションのための手段がいくつかあります。それぞれの特徴を理解し、適切に使い分けることが重要です。

1. <a>タグ:

   • 用途: 外部サイトへのリンク、ファイルダウンロード、明示的にフルリロードが必要な場合。
   • 特徴: 標準のブラウザ遷移（フルリロード）。React Routerの制御を受けない。
   • 使い分け: SPA内部のルーティングには使用しない。

2. Linkコンポーネント:

   • 用途: SPA内部のルートへのナビゲーション（ユーザーによるクリック操作）。
   • 特徴: クライアントサイドルーティングによるスムーズな遷移。History APIを使用。URLやstateを宣言的に指定できる。
   • 使い分け: ナビゲーションバー、リスト項目、ボタン状のリンクなど、ユーザーがクリックして別の画面に遷移する主要なインタラクションに使用する。

3. NavLinkコンポーネント:

   • 用途: SPA内部のルートへのナビゲーション + アクティブ状態のスタイリング。
   • 特徴: Linkの機能に加えて、アクティブな場合に自動的にクラスやスタイルが適用される。
   • 使い分け: 主にグローバルナビゲーションメニューなど、現在のページを示すリンクを視覚的に強調したい場所で使用する。

4. useNavigateフック:

   • 用途: プログラムによるナビゲーション。ユーザー操作以外のイベント（フォーム送信後、API呼び出し完了後、タイマー終了後など）での遷移。または、onClickハンドラのようなイベント内で、Linkコンポーネントを使わずに遷移をトリガーしたい場合。
   • 特徴: 関数呼び出しによって遷移を実行する。Linkと同様にHistory APIを使用する。replaceオプションやstateを渡すことができる。
   • 使い分け: ボタンクリック時の遷移（ボタンは<a>要素である必要がない）、フォームの送信処理の後、非同期処理の完了後など、コードの中で動的に遷移を制御したい場合に使用する。

“`jsx
// 例: ボタンクリックで遷移 (useNavigate)
import { useNavigate } from ‘react-router-dom’;

function MyButton() {
const navigate = useNavigate();

const handleClick = () => {
// なんらかの処理…
navigate(‘/destination’); // ‘/destination’ へ遷移
};

return

別のページへ;
}

// 例: フォーム送信後の遷移 (useNavigate)
import { useNavigate } from ‘react-router-dom’;

function MyForm() {
const navigate = useNavigate();

const handleSubmit = (event) => {
event.preventDefault();
// フォームデータの処理、API送信など…
// 処理成功後
navigate(‘/success’, { state: { message: ‘フォームが送信されました’ } });
};

return (

{/ … input要素など /}
送信

);
}
“`

ユーザーがクリックしてナビゲートするためのUI要素として最も直接的に対応するのがLink（またはNavLink）です。プログラムからトリガーされる遷移にはuseNavigateを使います。

実用的な例とサンプルコード

これまで学んだLinkコンポーネントの使い方を、具体的なシナリオで見ていきましょう。

例1: ヘッダーナビゲーション

アプリケーションのヘッダーに、主要なページへのリンクを配置する一般的な例です。アクティブなリンクを強調するためにNavLinkを使用することが多いですが、ここではLinkを使った基本的な例を示します。

“`jsx
// components/Header.js
import React from ‘react’;
import { Link } from ‘react-router-dom’;
import ‘./Header.css’; // スタイリング用のCSSファイル

function Header() {
return (

);
}

export default Header;

// App.js (抜粋)
import { Routes, Route } from ‘react-router-dom’;
import Header from ‘./components/Header’;
// 他のページコンポーネントをインポート…

function App() {
return (

);
}
``
この例では、Headerコンポーネント内のLinkをクリックすることで、対応するパスに遷移し、

内の`で適切なページコンポーネントがレンダリングされます。

例2: リスト項目からの詳細ページへのリンク

ユーザー一覧や商品一覧のようなリストから、個別の詳細ページへ遷移する際に、動的なパスを持つLinkがよく使われます。

“`jsx
// components/UserList.js
import React from ‘react’;
import { Link } from ‘react-router-dom’;

function UserList({ users }) {
return (

{users.map(user => (
• {/ to={/users/:userId} の形に動的に生成 /}
  /users/${user.id}}>
  {user.name}
  

))}

);
}

export default UserList;

// pages/UsersPage.js (抜粋)
import React, { useState, useEffect } from ‘react’;
import UserList from ‘../components/UserList’;

function UsersPage() {
const [users, setUsers] = useState([]);

useEffect(() => {
// 仮のユーザーデータ取得
const fetchUsers = async () => {
// 実際のアプリケーションではAPIからデータを取得
const data = [
{ id: 1, name: ‘Alice’ },
{ id: 2, name: ‘Bob’ },
{ id: 3, name: ‘Charlie’ }
];
setUsers(data);
};
fetchUsers();
}, []);

return (

Users

);
}

// App.js (ルーティング設定抜粋)
import { Routes, Route } from ‘react-router-dom’;
import UsersPage from ‘./pages/UsersPage’;
import UserDetailPage from ‘./pages/UserDetailPage’;

function App() {
return (

} />
{/ パスパラメータ :userId を定義 /}
} />
{/ …他のルート /}

);
}

// pages/UserDetailPage.js
import React from ‘react’;
import { useParams } from ‘react-router-dom’;

function UserDetailPage() {
const { userId } = useParams(); // URLからパスパラメータを取得

// userId を使ってユーザー詳細データを取得・表示
return (

User Detail

User ID: {userId}

{/ …ユーザー情報の表示 /}

);
}
``UserListコンポーネントでは、各ユーザーオブジェクトのidを使って、詳細ページへのパス/users/${user.id}を生成しています。UserDetailPageコンポーネントでは、useParamsフックを使ってURLからuserId`を取得し、そのIDに基づいたデータを表示します。

例3: 検索結果からの遷移 (クエリストリングの使用)

検索フォームから検索結果ページへ遷移し、検索クエリをクエリストリングとして渡す例です。検索結果リストの項目から、そのアイテムの詳細ページへ遷移するリンクも含むことがあります。

“`jsx
// components/SearchBar.js
import React, { useState } from ‘react’;
import { useNavigate } from ‘react-router-dom’;

function SearchBar() {
const [query, setQuery] = useState(”);
const navigate = useNavigate(); // フォーム送信は navigate が適している

const handleSearch = (event) => {
event.preventDefault();
if (query.trim()) {
// /search?q=ユーザー入力値 へ遷移
navigate(/search?q=${encodeURIComponent(query.trim())});
}
};

return (

setQuery(e.target.value)}
placeholder=”検索キーワード”
/>
検索

);
}

export default SearchBar;

// pages/SearchResultPage.js
import React from ‘react’;
import { useLocation, Link } from ‘react-router-dom’; // Link も使う可能性あり

function SearchResultPage() {
const location = useLocation();
const params = new URLSearchParams(location.search);
const searchQuery = params.get(‘q’); // クエリストリングから ‘q’ の値を取得

// 仮の検索結果
const results = searchQuery ? [{ id: 101, title: Result for ${searchQuery} }, { id: 102, title: Another result for ${searchQuery} }] : [];

return (

検索結果

{searchQuery ? (
<>

検索キーワード: “{searchQuery}”

{results.map(item => (
• {/ 検索結果アイテムの詳細ページへのリンク /}
  {/ 例: /items/101 /}
  /items/${item.id}}>{item.title}

))}

) : (

検索キーワードを入力してください。

)}

);
}

// App.js (ルーティング設定抜粋)
import { Routes, Route } from ‘react-router-dom’;
import SearchBar from ‘./components/SearchBar’;
import SearchResultPage from ‘./pages/SearchResultPage’;
import ItemDetailPage from ‘./pages/ItemDetailPage’; // 仮の詳細ページコンポーネント

function App() {
return (

} />
} />
{/ …他のルート /}

);
}
// pages/ItemDetailPage.js (例)
import React from ‘react’;
import { useParams } from ‘react-router-dom’;

function ItemDetailPage() {
const { itemId } = useParams();
// itemId を使ってアイテム詳細データを取得・表示
return (

Item Detail: {itemId}

{/ … /}

);
}

``
この例では、検索フォームの送信にはuseNavigateを使っていますが、検索結果一覧から個別アイテムへの遷移にはLinkを使用しています。SearchResultPageではuseLocation`を使ってクエリストリングを取得し、表示内容を変えています。

例4: 遷移先に状態を渡す (state)

特定のページから別のページへ遷移する際に、URLに表示させたくないが、遷移先のコンポーネントで利用したい一時的なデータを渡す場合にstatePropsが役立ちます。

“`jsx
// pages/ProductsPage.js (商品一覧)
import React from ‘react’;
import { Link } from ‘react-router-dom’;

function ProductsPage() {
const products = [
{ id: 1, name: ‘Laptop’, price: 1200 },
{ id: 2, name: ‘Keyboard’, price: 75 },
{ id: 3, name: ‘Mouse’, price: 25 }
];

return (

Products

{products.map(product => (
• {/ 商品詳細ページへのリンクに、価格情報を state として渡す /}
  /products/${product.id}}
  state={{ referrer: ‘products-list’, initialPrice: product.price }}
  >
  {product.name} – ${product.price}
  

))}

);
}

// pages/ProductDetailPage.js (商品詳細)
import React from ‘react’;
import { useParams, useLocation } from ‘react-router-dom’;

function ProductDetailPage() {
const { productId } = useParams();
const location = useLocation();
const state = location.state; // state を取得

console.log(‘Location state:’, state); // { referrer: ‘products-list’, initialPrice: 1200 } などが表示される

// productId を使って商品詳細データを取得・表示
return (

Product Detail: {productId}

{state && state.initialPrice && (

Initial Price (from list): ${state.initialPrice}

)}
{/ …詳細情報の表示 /}

);
}

// App.js (ルーティング設定抜粋)
import { Routes, Route } from ‘react-router-dom’;
import ProductsPage from ‘./pages/ProductsPage’;
import ProductDetailPage from ‘./pages/ProductDetailPage’;

function App() {
return (

} />
} />
{/ …他のルート /}

);
}
``
この例では、商品一覧ページから商品詳細ページへ遷移する際に、商品リストから取得した一部の情報（referrerやinitialPrice）をstateとして渡しています。商品詳細ページでは、useLocation().stateを使ってその情報を受け取り、表示や処理に利用できます。これは、API呼び出しを減らしたり、遷移元のコンテキスト情報を提供したりするのに便利です。ただし、state`はリロードで失われるため、永続化が必要なデータや、直接URLからアクセスした場合でも表示できる必要があるデータには適していません。

トラブルシューティングとよくある落とし穴

Linkコンポーネントを使う上で遭遇しやすい問題と、その解決策をいくつか紹介します。

1. Linkが機能しない、フルリロードが発生する:

   • 原因1: アプリケーション全体がBrowserRouter（または他のRouterコンポーネント）で囲まれていない。
     • 解決策: アプリケーションのルートコンポーネント（例: App）や、ルーティングを使用する部分全体をreact-router-domからインポートしたBrowserRouterなどのRouterコンポーネントで囲んでください。
   • 原因2: Linkではなく<a>タグを使っている。
     • 解決策: SPA内部のナビゲーションには<a>タグではなくLinkコンポーネントを使用しているか確認してください。
   • 原因3: target="_blank" などを指定している。
     • 解決策: target="_blank"は新しいタブ/ウィンドウで開く指示であり、多くの場合フルリロードを伴います。SPA内部リンクで新しいタブを開くのはユーザー体験上一般的ではないため、基本的にはtarget属性は使用しません。もし外部サイトへのリンクで新しいタブを開きたいなら、迷わず<a>タグを使いましょう。
   • 原因4: onClickハンドラ内でevent.preventDefault()を呼び出しているが、その後useNavigateなどでプログラムによる遷移を行っていない。
     • 解決策: onClickでデフォルトの遷移を阻止した場合、自分でプログラム的に遷移をトリガーするか、あるいはpreventDefaultを条件付きで呼び出す（例: 確認ダイアログでキャンセルされた場合のみ）ようにロジックを見直してください。

2. 相対パスが意図しないパスに解決される:

   • 原因: 現在のURLパスに対する相対的な解決ルール（relative="path"）と、期待する遷移先パスが一致しない。特にネストされたルーティングで発生しやすい。
   • 解決策:
     • toPropsに絶対パスを使用することを検討する。
     • 現在のURLとtoに指定した相対パスがどのように解決されるか、紙やコンソールで確認してみる。
     • React Router v6.4以降を使っている場合は、relative="route"Propsが役立つか検討する。しかし、多くの場合デフォルトのrelative="path"が直感的です。
     • どうしても相対パスでの解決が難しい場合は、useNavigateとuseResolvedPathフックを組み合わせて、プログラムで相対パスを解決し、その結果を使って絶対パスで遷移するという方法もあります（上級）。

3. stateが遷移先で取得できない:

   • 原因1: statePropsまたはtoオブジェクトのstateプロパティで正しくstateを渡せていない。
     • 解決策: LinkコンポーポーネントのPropsでstate={{ key: value }}またはto={{ pathname: '...', state: { key: value } }}のように指定しているか確認してください。
   • 原因2: 遷移先のコンポーネントでuseLocation().stateを正しく取得できていない。
     • 解決策: 遷移先のコンポーネントでimport { useLocation } from 'react-router-dom'; const location = useLocation(); const state = location.state; のように正しく取得しているか確認してください。
   • 原因3: 遷移先のページが直接URLでアクセスされた（例: ブラウザのリロード、ブックマーク、URLの直接入力）。
     • 解決策: stateはブラウザの履歴エントリに紐づく一時的な情報です。リロードや直接アクセスでは失われます。stateに依存する表示や処理を行う場合は、stateが存在しない場合のフォールバックロジック（例: データを再取得する、エラーメッセージを表示するなど）を実装する必要があります。永続化が必要なデータは、クエリストリング、パスパラメータ、ローカルストレージ、またはサーバー側で管理することを検討してください。

4. スタイリングが効かない、または意図しないスタイルが適用される:

   • 原因1: CSSセレクタが正しくない。Linkコンポーネントは最終的に<a>タグとしてレンダリングされるため、CSSではa要素や指定したclassNameに対してスタイルを適用します。
   • 解決策: 開発者ツールでレンダリングされたHTMLを確認し、要素構造やクラス名を確認してください。CSSセレクタが正しく要素をターゲットにしているか確認してください。
   • 原因2: NavLinkと間違えている、またはNavLinkのアクティブスタイルが期待通りに適用されない。
     • 解決策: アクティブスタイリングが必要な場合はNavLinkを使用しているか確認してください。NavLinkのアクティブクラス名やスタイルはカスタマイズ可能です (activeClassName, activeStyle Props – v5、v6では関数形式のclassName/style Propsを使用)。ルーティング設定（特にネストされたルートやインデックスルート）がNavLinkのパスと正確にマッチしているか確認してください。

これらのよくある問題を理解しておくことで、開発中のデバッグ時間を減らすことができます。

まとめ

この記事では、React RouterにおけるSPAナビゲーションの要であるLinkコンポーネントについて、その基礎から応用、そして他のナビゲーション手段との比較まで、詳細に解説しました。

Linkコンポーネントは、HTMLの<a>タグのように見えますが、クリックされた際にブラウザのフルリロードを防ぎ、History APIを利用してReact Routerによるクライアントサイドルーティングをトリガーするという重要な役割を担っています。これにより、SPAのスムーズで高速なページ遷移を実現します。

Linkコンポーネントの主要なポイントをまとめます。

• SPA内部のルート間を遷移するための主要なUIコンポーネントです。
• 必須のtoPropsで遷移先のパスを指定します。文字列またはオブジェクトで指定でき、オブジェクト形式ではpathname, search, hash, stateなどを細かく設定できます。
• replace={true}Propsで、履歴スタックに新しいエントリを追加する代わりに現在のエントリを置き換えることができます。
• statePropsまたはtoオブジェクトのstateプロパティで、遷移先のコンポーネントに一時的なデータを渡すことができます（リロードで失われます）。
• 相対パス (/ で始まらない) は、デフォルトでは現在のURLを基準に解決されます（relative="path"）。v6.4+ではrelative="route"でルート定義パス基準に変更できます。
• onClickハンドラで、遷移前のロジックを実行したり、event.preventDefault()でデフォルトの遷移をキャンセルしたりできます。
• HTMLの<a>タグの多くの標準属性（className, style, titleなど）をPropsとして受け付けます。
• アクティブ状態のスタイリングが必要な場合は、Linkの代わりにNavLinkを使用するのが一般的です。
• 外部サイトへのリンクやフルリロードが必要な場合は、HTMLの<a>タグを使用すべきです。
• プログラムによる遷移にはuseNavigateフックを使用します。

Linkコンポーネントは、React Routerを使ったSPA開発において最も頻繁に利用されるコンポーネントの一つです。その使い方と、Propsによるカスタマイズ方法をしっかりと理解することは、ユーザーフレンドリーで効率的なアプリケーションを構築するために不可欠です。

この記事で学んだ知識を活かして、あなたのReactアプリケーションに快適なナビゲーションを実装してみてください。さらに深いルーティングの概念（ネストされたルーティング、認証付きルート、データローディングなど）や、NavLink, useNavigateなどの他のReact Router機能についても学ぶことで、より高度なSPA開発が可能になります。

この解説が、あなたのReact RouterおよびLinkコンポーネントの理解を深める一助となれば幸いです。Happy Coding!

---

およそ5000語となるように、各セクションを詳細に記述し、例を豊富に含めました。要件通り、記事の内容を直接表示しています。