個人的な備忘録：React Routerを使って簡単なアプリを作成し、ルーティングの仕組みをアウトプットしてみた

はじめに

React Routerは、Reactアプリケーションでルーティングを管理するための便利なライブラリです。

私自身、あまり馴染みがなかったため、前回の記事で基本的な内容を簡単にまとめてみました。よろしければ、以下のリンクをご参考ください。

今回は、React Routerを使い、シンプルな構成でルーティングを実装してみます。

この記事は自分の備忘録としてまとめた内容が中心ですので、温かい目で見ていただけると幸いです。

まずは、分からなくても動かしてみる

普段はインフラの自動化などでYAML、JSON、Pythonを使うことが多いです。

しかし、1つのプログラミング言語を徹底的に習得することで、他の言語にも知識を横展開したり流用したりできると考えています。

そのため、React Routerの理解を深めるために、まずは動くものを作ってみようと思いました。

実際に動かしてみた

以下は、シンプルな React Router アプリケーションを構築するためのディレクトリ構成と、それを作成する手順です。

ディレクトリ構成

my-simple-app/
├── public/
│   └── index.html (自動生成される)
├── src/
│   ├── index.js
│   ├── App.js
├── package.json
├── package-lock.json (自動生成される)
├── node_modules/ (自動生成される)
└── README.md (任意)

1. プロジェクトディレクトリを作成

まず、プロジェクト用のディレクトリ my-simple-app を作成しました。

mkdir my-simple-app
cd my-simple-app

2. React アプリの作成

npx create-react-app . を実行して、React アプリを作成しようとしましたが、依存関係の競合でエラーが発生しました。

npx create-react-app .

エラー内容:

Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-simple-app@0.1.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @testing-library/react@13.4.0
npm error node_modules/@testing-library/react
npm error   @testing-library/react@"^13.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/hondaakiratarou/.npm/_logs/2025-01-27T21_00_14_704Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/hondaakiratarou/.npm/_logs/2025-01-27T21_00_14_704Z-debug-0.log
npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0 failed

• react@19.0.0 がインストールされており、@testing-library/react が react@^18.0.0 を必要としているため、依存関係の解決に失敗しました。

3. 強制的に依存関係をインストール

npm install --force を使用して依存関係の競合を無視し、インストールを完了しました。

npm install --force

実際のコマンド結果

➜  my-simple-app git:(main) ✗ npm install --force
npm warn using --force Recommended protections disabled.

added 1 package, changed 1 package, and audited 1326 packages in 3s

268 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

4. 必要なファイルを作成

src/index.js

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

src/App.js

src/App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

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

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

function Contact() {
  return <h1>Contact Page</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link> | <Link to="/contact">Contact</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

5. React Router をインストール

以下のコマンドを使用して、React Router をインストールします。

npm install react-router-dom

実際に起動してブラウザで確認してみた

開発サーバーを起動します。

npm start

実際のコマンド結果

Compiled successfully!

You can now view my-simple-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.8:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

URL 確認

ブラウザで以下の URL を確認してください：

• ホームページ: http://localhost:3000/
• About ページ: http://localhost:3000/about
• Contact ページ: http://localhost:3000/contact

今回は、ホームページのスクリーンショットのみ掲載しますが、それぞれのページが正しく表示されることを確認できました。

まとめ

最後までお読みいただき、ありがとうございました。

今回は基礎的な内容ではありますが、React と React Router の違いについて自分なりに整理し、言語化することで理解を深めることができました。

これからも、このような基本的な内容を丁寧にまとめ、知識を定着させていきたいと思います。