Reactでのページ遷移 React Routerについて

## はじめに
時間割アプリの開発にあたって、リンクの画面遷移設定を行いました。
HTMLでは`a`タグを使いますが、Reactでは`react-router-dom`というライブラリで遷移を行います。
今回はその方法を、時間割アプリ開発の内容に基づいて解説していきます。

## Reactの画面遷移について
Reactでは、'react-router-dom'というライブラリを使ってクライアントサイドのページ遷移を実現する。このライブラリでは、`a`タグの代わりに`Link`コンポーネントを使用して、リロードを伴わないページ遷移を行う。

## ディレクトリ構成と画面情報
ページ遷移のリンクは以下のようなメニューに表示されているボタンをクリックすることで行われる。
メニューバーは`SideBar.jsx`コンポーネントで記述。
(`Sidebar`という名前はPC表示の際にサイドバー表示になるため。)
![スクリーンショット 2024-10-03 22.58.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842446/f185ed64-7f30-a59c-31a0-1843ab71ca06.png)
`Sidebar.jsx`は各ページのコンポーネント内で呼び出される子コンポーネントになる。
また、各ページの表示は`App.jsx`で表示されている。

## `App.jsx` `Sidebar.jsx`の初期状態
```App.jsx
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { AppHeader } from "./components/AppHeader";
import { SideBar } from "./components/SideBar";
import { PageTitle } from "./components/PageTitle";
import "./style.css";

function App() {
  return (
    <>
      <AppHeader />
      <div className="flex">
        <SideBar />
        <main>
          <PageTitle />
        </main>
      </div>
    </>
  );
}

export default App;
```
```SideBar.jsx
import styled from "styled-components";
import { Link } from "react-router-dom";

//スタイルは省略

export const SideBar = () => {
  return (
    <>
      <aside>
        <ul>
          <li>
            //基本時間割ページへの遷移記述
          </li>
          <li>
            //各月時間割ページへの遷移記述
          </li>
          <li>
            //生徒情報ページへの遷移記述
          </li>
          <li>
            //振替残数ページへの遷移記述
          </li>
        </ul>
      </aside>
    </>
  );
};

```
## ページ遷移を作る流れ
5つのステップで完了できるが、今回は状態管理は割愛し1~4までのステップを解説する。

1\.React Routerのインストール
2\.各ページコンポーネントを作成
3\.`App.jsx`でルーティングを設定
4\.リンクやナビゲーションの追加
5\.ページ間の状態管理

### 1\.React Routerのインストール
ルーティングを管理するために`react-router-dom`パッケージをインストール。
```tarminal
npm install react-router-dom
```

### 2\.各ページコンポーネントを作成
それぞれのページファイルを`components`フォルダ内に作成し、各ページを`App.jsx`にインポートしておく。
・BasicTimetablePage.jsx(基本時間割ページ)
・MonthlyTimetablePage.jsx(各月時間割ページ)
・StudentInfoPage.jsx(生徒情報ページ)
・StudentAbsencePage.jsx(振替残数確認ページ)

各コンポーネントの基本構造は以下の通り。
```jsx
const コンポーネント名 = () => {
  return (
    <div>
      <h1>ページタイトル</h1>
    </div>
  );
};

export default コンポーネント名;
```

### 3\.`App.jsx`でルーティングを設定
`App.jsx`側で、`react-router-dom`を使用してルートを設定。

・`BrowserRouter`は、ルーティングの基盤として使用。
・全体を`<Router>`でラップ。これにより、アプリ全体でルーティングが機能する。
・`Routes`でルーティングの範囲を定義し、`Route`で各ページのルートを設定。
・`path`属性には対応するURLパスを指定し、`element`属性で表示するコンポーネントを指定。
```App.jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import BasicTimetablePage from './components/BasicTimetablePage';
import MonthlyTimetablePage from './components/MonthlyTimetablePage';
import StudentInfoPage from './components/StudentInfoPage';
import StudentAbsencePage from './components/StudentAbsencePage';

const App = () => {
  return (
   <Router>
        <main>
          <Routes>
            <Route path="/basict-timetable" element={<BasicTimetablePage />} />
            <Route path="/monthly-timetable" element={<MonthlyTimetablePage />} />
            <Route path="/student-info" element={<StudentInfoPage />} />
            <Route path="/student-absence" element={<StudentAbsencePage />} />
          </Routes>
        </main>
    </Router>
  );
};

export default App;
```

### 4\.リンクやナビゲーションの追加
`SideBar.jsx`にリンクを追加して、各ページに遷移できるようにする。
ページ間を移動するために、`react-router-dom`の`Link`コンポーネントを使ってリンクを追加できる。
```Sidebar.jsx
import { Link } from "react-router-dom";

export const SideBar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/BasicTimetablePage">Basic　Timetable</Link>
        </li>
        <li>
          <Link to="/monthly-timetable">monthly-timetable</Link>
        </li>
        <li>
          <Link to="/student-info">Student Info</Link>
        </li>
        <li>
          <Link to="/student-absence">Student Absence</Link>
        </li>
      </ul>
    </nav>
  );
};
```

## おわりに
このように`App.jsx`のような親コンポーネントで`react-router-dom`をインポートしルーティング設定を行い、各ページコンポーネントで`Link`コンポーネントによるリンク追加を行うことで、画面遷移が可能になる。

> 時間割アプリで使用した他の機能はこちら

https://qiita.com/naoki-atjp/items/d71c2bac6b4edefbddcb

https://qiita.com/naoki-atjp/items/43aab60a1ff7e6bc8291

https://qiita.com/naoki-atjp/items/e890c89452dec8573fbd