React Routerとは？シングルページアプリのルーティングを初心者向けにわかりやすく解説
生徒
「Reactでページを切り替えるにはどうすればいいんですか？」
先生
「ReactではReact Routerという仕組みを使って画面を切り替えます。」
生徒
「普通のホームページみたいにページ移動できるんですか？」
先生
「できますが、少し仕組みが違います。順番に理解していきましょう。」
1. React Routerとは何か
React Routerとは、Reactで画面の切り替えを行うためのライブラリです。ライブラリとは、便利な機能をまとめた道具のことです。
通常のウェブサイトではページを移動すると画面全体が読み込み直されますが、Reactでは必要な部分だけを切り替えます。
この仕組みを使うことで、より高速でスムーズな画面遷移が可能になります。
2. シングルページアプリとは
シングルページアプリとは、一つのページの中で内容を切り替える仕組みのことです。
例えば、スマートフォンのアプリのように、画面が切り替わっても実際には同じページの中で動いています。
このような仕組みを実現するためにReact Routerが使われます。
3. React Routerの基本的な使い方
まずは基本的なルーティングの書き方を見てみましょう。
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<h1>ホーム</h1>} />
<Route path="/about" element={<h1>会社情報</h1>} />
</Routes>
</BrowserRouter>
);
}
export default App;
Routeはルール、pathはURL、elementは表示する内容を意味します。
4. Linkでページ移動をする
ページ移動はLinkという機能を使います。通常のリンクと似ていますが、ページ全体の再読み込みを行いません。
import { Link } from "react-router-dom";
function Menu() {
return (
<div>
<Link to="/">ホーム</Link>
<Link to="/about">会社情報</Link>
</div>
);
}
toは移動先のURLを指定するものです。
5. useNavigateでプログラムから移動する
ボタンなどの操作で画面遷移したい場合はuseNavigateを使います。
import { useNavigate } from "react-router-dom";
function Home() {
const navigate = useNavigate();
return (
<button onClick={() => navigate("/about")}>
会社情報へ
</button>
);
}
関数を使って自由に画面遷移を制御できるのが特徴です。
6. ネストされたルーティングとは
ネストとは入れ子構造のことです。親ページの中に子ページを表示することができます。
<Route path="/dashboard" element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
</Route>
大きなアプリを作るときに役立つ仕組みです。
7. React Routerを使うメリット
React Routerを使うことで、画面遷移がスムーズになりユーザー体験が向上します。
また、ページ構造を整理しやすくなり、コードの管理も簡単になります。
複雑なアプリでも分かりやすく設計できるのが大きなメリットです。
8. React Routerの理解を深めるポイント
ルーティングとは、どのURLでどの画面を表示するかを決める仕組みです。
Reactではページを切り替えるのではなく、表示内容を切り替えるという考え方が重要になります。
この考え方を理解することで、Reactアプリの構造がより分かりやすくなります。
