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

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

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

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

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

:::note info
開発環境：MacOS

Reactのバージョン↓
```bash
(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

```bash
.
├── 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

```

# ライブラリのインストール
概要に記したことを実現するには以下のライブラリをインストールする必要があります。
```bash
npm install react-router-dom
```

# Sidebarコンポーネントの作成
以下がSidebarコンポーネントの中身です。
```jsx
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が更新されますが、ページ全体のリロードは発生しません。そのため、ユーザーがブラウザの「戻る」や「進む」ボタンを使用してナビゲーションできるようになります
- <Link to="/path">のtoプロパティにはナビゲート先のパスを指定します
- あとで作成するApp.jsのパスと一致する必要あり

# MainContentコンポーネントの作成
以下がMainContentの中身です。
```jsx
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とかは今回関係ないので無視していいです。
```jsx
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の変更とコンポーネントの描画ができるようになったかと思います。