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

はじめに

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

Reactの画面遷移について

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

ディレクトリ構成と画面情報

ページ遷移のリンクは以下のようなメニューに表示されているボタンをクリックすることで行われる。
メニューバーはSideBar.jsxコンポーネントで記述。
(Sidebarという名前はPC表示の際にサイドバー表示になるため。)

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パッケージをインストール。

npm install react-router-dom

2.各ページコンポーネントを作成

それぞれのページファイルをcomponentsフォルダ内に作成し、各ページをApp.jsxにインポートしておく。
・BasicTimetablePage.jsx(基本時間割ページ)
・MonthlyTimetablePage.jsx(各月時間割ページ)
・StudentInfoPage.jsx(生徒情報ページ)
・StudentAbsencePage.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コンポーネントによるリンク追加を行うことで、画面遷移が可能になる。

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