💭
react-routerについて初歩的な理解を深める

2025/09/30に公開
 はじめに業務で、Reactを扱いつつ並行して勉強をしている。

react-routerを将来的に扱う必要があるため、公式ドキュメントを一読した内容を整理する。

 react-routerとは公式ドキュメント原文
React Router is a multi-strategy router for React bridging the gap
from React 18 to React 19.
You can use it maximally as a React framework or as minimally as you want.
↓

和訳
React Routerは、React向けのマルチ戦略ルーターで、
React18からReact19への橋渡しをする役割を持つ。
Reactフレームワークとして最大限活用することも、必要最小限の形で使うこともできる。
和訳だけ見ても、いまいち何を言っているかピンと来ないのでもう少し整理すると、
react-routerとは、Reactアプリケーションにおいて、複数のページや画面を切り替えるためのルーティング機能を提供するライブラリのこと。

例えば/homeや/about等のURLに応じて、表示するコンポーネントを切り替えることができる。
つまり、react-routerはReactでページ遷移を管理するためのライブラリと覚えておけば良さそう。

 react-routerの特徴シングルページアプリケーション（SPA）のルーティングだけでなく、サーバーサイドレンダリングやデータフェッチなども含めて柔軟に対応できる。
本格的なフレームワークのようにデータ取得や画面遷移を全面的に任せることもできるし、単純に「ページを切り替える」だけの、最低限の機能だけ使うことも可能である。

 ソースコードイメージreact-routerを実際に使った時のイメージをソースコードで掴むために、

ページごとに表示を切り替えるだけのシンプルな使い方をしてみる。
// App.tsx
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        {/* 画面遷移用リンク */}
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>

      <Routes>
        {/* URLに応じて表示するコンポーネントを切り替え */}
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}
この場合、/にアクセスするとHomeコンポーネントが、/aboutにアクセスするとAboutコンポーネントが表示される。

 参照・https://reactrouter.com/home

・https://blog.logrocket.com/react-router-v6-guide/
はじめに

react-routerとは

react-routerの特徴

ソースコードイメージ

参照

Discussion
