目次
React Routerとは？
React Routerでできること
・ページ遷移
・URL管理
・ネストルーティング
・URLパラメータ取得
・レイアウト共有
・認証ルーティング
インストール
npm install react-router-dom
基本的なルーティング設定
main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
ReactDOM.createRoot(document.getElementById("root")!).render(
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
ページ作成
Home.tsx
export default function Home() {
return <h1>Home Page</h1>;
}
About.tsx
export default function About() {
return <h1>About Page</h1>;
}
Linkを使った画面遷移
通常のaタグを使用するとページ全体が再読み込みされますが、
Linkを利用するとSPAの状態を維持したまま画面遷移できます。
import { Link } from "react-router-dom";
export default function Home() {
return (
<div>
<h1>Home</h1>
<Link to="/about">
Aboutへ移動
</Link>
</div>
);
}
URLパラメータ
ルーティング設定
<Route path="/users/:id" element={<User />} />
パラメータ取得
import { useParams } from "react-router-dom";
export default function User() {
const { id } = useParams();
return <h1>User ID: {id}</h1>;
}
ネストルーティング
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
</Route>
Layout.tsx
import { Outlet } from "react-router-dom";
export default function Layout() {
return (
<div>
<header>Header</header>
<Outlet />
<footer>Footer</footer>
</div>
);
}
React Routerを使うメリット
【スムーズな画面遷移】
ページ全体を再読み込みしないため、高速なUIを実現できます。
【保守性向上】
画面ごとにコンポーネントを分割でき、管理しやすくなります。
【SPA開発に最適】
モダンなReactアプリケーション開発で広く利用されています。
まとめ
React Routerを利用することで、Reactアプリケーションに柔軟なルーティング機能を実装できます。
React開発では非常に利用頻度の高いライブラリのため、基本的な使い方を理解しておくことが重要です。
初心者はまず以下を覚えるのがおすすめです。
・BrowserRouter
・Routes
・Route
・Link
・useParams
・Outlet
まずは小さな画面遷移から試し、SPA開発に慣れていきましょう。
