発行:

基本的なルーティング設定

ルーティングの定義

React Routerの最新仕様では、 Data Router と呼ばめる新しいルーティング方式が推奨されています。これは従来の BrowserRouter コンポーネントでラップする方式とは異なり、オブジェクト形式で定義を行います。

createBrowserRouter の役割

この関数は、パス（URL）と表示する要素（コンポーネント）のリストを受け取り、ルーターオブジェクトを生成します。

src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom'

// 1. 各ページのコンポーネント
const Home = () => (
  <div className="p-4">
    <h1 className="text-2xl font-bold">トップページ</h1>
    <Link to="/about" className="text-indigo-400 underline">Aboutページへ</Link>
  </div>
)

const About = () => (
  <div className="p-4">
    <h1 className="text-2xl font-bold">Aboutページ</h1>
    <Link to="/" className="text-indigo-400 underline">トップページへ戻る</Link>
  </div>
)

// 2. ルート構成の定義
const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
]);

// 3. RouterProviderによる適用
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

なぜオブジェクト形式なのか

オブジェクト形式での定義（Data Router）を採用することで、ページが表示される 前 にデータを読み込む loader などの強力な機能が利用可能になります。これにより、SPA特有の「画面は出たがデータがまだ来ていない」というチラつきを解消できます。

Linkコンポーネントによるナビゲーション

SPAの命とも言えるのが、高速なページ遷移です。

<a> タグとの決定的な違い

通常の <a> タグを使用すると、ブラウザはWebサイト全体を再読み込みしてしまいます。これではせっかくのReactの状態もリセットされてしまいます。
一方、<Link> コンポーネントは、ブラウザの再読み込みを阻止し、JavaScriptでURLだけを更新します。

クライアントサイドナビゲーションの利点

リンクをクリックした瞬間、必要なコンポーネントだけが瞬時に差し替わります。共通のヘッダーやフッターは再描画されないため、ユーザーはまるでネイティブアプリを使っているかのようなシームレスな体験を得られます。

動作確認とデバッグ

実装できたら、実際にブラウザでリンクをクリックしてみてください。

チェックポイント

  • ブラウザのアドレスバーのURLが / と /about で切り替わっているか
  • ページ遷移時にブラウザのタブにスピナーが表示（再読み込み）されていないか
  • コンソールにエラーが出ていないか

これらが確認できれば、基本的なルーティングの構築は成功です！