[React.js] - パート8: React Router
Ace Lennox
React Routerは、Reactアプリケーションでルーティングを管理するための最も人気のあるライブラリです。このガイドでは、React Routerを使ったページ間のナビゲーションの設定方法を簡単な例とともに解説します。
1. React Routerの追加
以下のコマンドをターミナルで実行して、React Routerをインストールします：
npm install react-router-dom
古いバージョン（例: v5）からアップグレードする場合は、@latestフラグを使用します：
npm install react-router-dom@latest このガイドではReact Router v6を使用します。
2. フォルダ構成の設定
複数ページのアプリケーションを作成するには、以下のようなフォルダ構成を使用します：
src/
pages/
Layout.js
Home.js
Blogs.js
Contact.js
NoPage.js
各ファイルには、シンプルなReactコンポーネントを記述します。
3. index.jsでの基本設定
index.jsファイルでReact Routerを設定して、ページ間のルーティングを行います：
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
4. 仕組みの解説
<BrowserRouter>: アプリケーション全体をラップして、React Routerがナビゲーションを管理できるようにします。<Routes>: すべてのルートを定義します。<Route>: パスと表示するコンポーネントを指定します。path="/"ルートはLayoutコンポーネントを表示します。ネストされたルート（例:
path="blogs"）は親ルートと組み合わさり、/blogsになります。
デフォルトルート:
<Route index element={<Home />}>は、/のデフォルトルートとして機能します。404ページ:
path="*"ルートは、未定義のURLをキャッチします。これは404ページとして便利です。
5. 各ページの作成
Layoutコンポーネント
Layoutコンポーネントは、すべてのページで共通の内容（例: ナビゲーションバー）を表示します。<Outlet>を使用して、選択されたルートのコンポーネントをレンダリングします。
import { Outlet, Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
);
};
export default Layout;
その他のページ
以下は各ページのシンプルな例です：
Home.js
const Home = () => {
return <h1>ホームページへようこそ</h1>;
};
export default Home;
Blogs.js
const Blogs = () => {
return <h1>ブログ記事一覧</h1>;
};
export default Blogs;
Contact.js
const Contact = () => {
return <h1>お問い合わせ</h1>;
};
export default Contact;
NoPage.js
const NoPage = () => {
return <h1>404 - ページが見つかりません</h1>;
};
export default NoPage;
6. ナビゲーション
React Routerでは、内部リンクには<a>の代わりに<Link>を使用します。これにより、アプリケーションの状態を保持し、ページ全体のリロードを避けることができます。
例:
<Link to="/">Home</Link>
<Link to="/blogs">Blogs</Link>
<Link to="/contact">Contact</Link>
まとめ
React Routerを使うと、動的で多ページのアプリケーションを簡単に作成できます。以下を学びました：
React Routerのインストール
明確なフォルダ構成の設定
index.jsでのルーティングの設定<Routes>と<Route>を使ったナビゲーション内部ナビゲーションには
<Link>を使用未定義ルートを処理する404ページの作成
これらの例を試して、React Routerを使ったアプリケーション開発を始めましょう！
ソースコード
このプロジェクトの完全なソースコードはGitHubで利用可能です。