ReactのBrowserRouterを使用してルーティング（2024年記事作成）

概要

ReactのBrowserRouterを使用し、WEBページに表示するコンポーネントを切り替える方法について。
いくつかReactのコード解説も挟んでいますので是非、読んでみてください。
※主にBrowserRouterについての解説

前提として、今回説明するアプリケーションにはSidebarとMainContentがあります。
Sidebarには以下の2つのメニューがあります。

• コンポーネント1
• コンポーネント2

本記事では以下を実現します。

コンポーネント1がクリックされたら、MainContentにコンポーネント1が表示されるように。
コンポーネント2がクリックされたら、MainContentにコンポーネント2が表示されるように。

開発環境：MacOS

Reactのバージョン↓

(venv) MacBook-Air% npm list react
react_app@0.1.0 
../react_app
├─┬ @testing-library/react@13.4.0
│ └── react@18.2.0 deduped
├─┬ react-dom@18.2.0
│ └── react@18.2.0 deduped
├─┬ react-router-dom@6.21.1
│ ├─┬ react-router@6.21.1
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ react-scripts@5.0.1
│ └── react@18.2.0 deduped
└── react@18.2.0

最終的なディレクトリ構成（src以降の）を先に示しときます。
本記事で使用するファイルは以下の3つのみです。

• App.js
• MainContent.jsx
• Sidebar.jsx

.
├── App.css
├── App.js               ← 本記事で使用するファイル
├── App.test.js
├── components
│   ├── Header.jsx
│   ├── Home.jsx
│   ├── MainContent.jsx　← 本記事で使用するファイル
│   ├── Sidebar.jsx　　　 ← 本記事で使用するファイル
│   ├── css
│   │   └── style.css
│   └── js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js

ライブラリのインストール

概要に記したことを実現するには以下のライブラリをインストールする必要があります。

npm install react-router-dom

Sidebarコンポーネントの作成

以下がSidebarコンポーネントの中身です。

import React from 'react';
import { Link } from 'react-router-dom';

function Sidebar() {
    return (
        <div>
            <Link to="/component1">コンポーネント1</Link>
            <Link to="/component2">コンポーネント2</Link>
        </div>

    )
}

export default Sidebar;

◎解説

• Linkコンポーネントは先ほどインストールしたReact Routerのコンポーネントです
• LinkはReact内でのナビゲーションを管理するために使用されます
• Linkはブラウザのページ再読み込みをせず、アプリ内の異なるビューやルート間のナビゲーションを可能にする
• Linkを使用するとURLが更新されますが、ページ全体のリロードは発生しません。そのため、ユーザーがブラウザの「戻る」や「進む」ボタンを使用してナビゲーションできるようになります
• のtoプロパティにはナビゲート先のパスを指定します
• あとで作成するApp.jsのパスと一致する必要あり

MainContentコンポーネントの作成

以下がMainContentの中身です。

import React from 'react';

function MainContent({ selectedComponent }) {
    switch (selectedComponent) {
      case 'component1':
        return <div>コンポーネント1の内容</div>;
      case 'component2':
        return <div>コンポーネント2の内容</div>;
      default:
        return <div>メインコンテンツ</div>;
    }
  }

  export default MainContent;

◎解説

• あとで作成するApp.jsからselectedComponentを受け取ります
• selectedComponentの内容に応じて描画する内容を制御します
• 今回の場合だとSidebarにあるメニューに応じて描画内容を制御

App.js

中身は以下です。Headerとかは今回関係ないので無視していいです。

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
// Components
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import MainContent from './components/MainContent';

function App() {
  return (
    <Router>
      <div>
        <Header />
        <Sidebar />
        <Routes>
          <Route path="/" element={<MainContent />} />
          <Route path="/component1" element={<MainContent selectedComponent="component1" />} />
          <Route path="/component2" element={<MainContent selectedComponent="component2" />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

◎解説

• Routerコンポーネントは、ルーティングを行うアプリケーション全体をラップするために使用
• Routesコンポーネントは、異なるルート（パス）とそれに対応するコンポーネントを定義するために使用
• Routeコンポーネントは、特定のURLパスに対応するコンポーネントを定義
• <Route path=の部分はSidebarのパスと一致する必要あり

これでnpm startすれば、ルーターを使用したURLの変更とコンポーネントの描画ができるようになったかと思います。