【React学習 #5】React Routerで画面遷移を実装する

はじめに

この記事はReact初心者の筆者が学習のために書いている記事です。
間違っていたら温かくご指摘いただけるとありがたいです。

React Routerとは

Reactでルーティング設定をできるようにするするためのライブラリです。
簡単に言えば、URLでページ遷移ができるようになるということですね。

React Routerをインストール

以下のコマンドを実行して最新版のReact Routerをインストールします。

npm install react-router-dom@latest

package.jsonでReact Routerのバージョンを確認できます。

package.json

"dependencies": {
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.11.1",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
}

React Routerを使ってみる

• ページを用意する

ページ遷移を実装するのですから、遷移するページを作るところから始めましょう。
srcフォルダ直下にpagesフォルダを作成し、その下にHome、About、Contentsという3つのページを作成します。

projectフォルダ
└── src
   └──  pages
       ├── About.js
       ├── Contents.js
       └── Home.js

それぞれのページの中は以下のように実装しています。
ページのタイトルと他のページへのリンクがあるだけです。

/src/pages/Home.js

import { Link } from "react-router-dom";

function Home() {
  return (
    <>
      <h1 className="text-3xl font-bold underline text-center mb-4">Homeページ</h1>
      <div className="text-blue-500 hover:underline text-center my-1.5">
        <Link to={'/about'}>Aboutページを開く</Link>
      </div>
      <div className="text-blue-500 hover:underline text-center my-1.5">
        <Link to={'/contents'}>Contentsページを開く</Link>
      </div>
    </>
  );
}

export default Home;

/src/pages/About.js

import { Link } from "react-router-dom";

function About() {
  return (
    <>
      <h1 className="text-3xl font-bold underline text-center mb-4">Aboutページ</h1>
      <div className="text-blue-500 hover:underline text-center my-1.5">
        <Link to={'/'}>Homeページを開く</Link>
      </div>
      <div className="text-blue-500 hover:underline text-center my-1.5">
        <Link to={'/contents'}>Contentsページを開く</Link>
      </div>
    </>
  );
}

export default About;

/src/pages/Contents.js

import { Link } from "react-router-dom";

function Contents() {
  return (
    <>
      <h1 className="text-3xl font-bold underline text-center mb-4">Contentsページ</h1>
      <div className="text-blue-500 hover:underline text-center my-1.5">
        <Link to={'/'}>Homeページを開く</Link>
      </div>
      <div className="text-blue-500 hover:underline text-center my-1.5">
        <Link to={'/about'}>Aboutページを開く</Link>
      </div>
    </>
  );
}

export default Contents;

• ルーティングを設定する

次にルーティングを設定します。
App.jsを以下のように編集します。

/src/App.js

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contents from './pages/Contents';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path={`/`} element={<Home />} />
        <Route path={`/about`} element={<About />} />
        <Route path={`/contents`} element={<Contents />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

• 実行する

以下のコマンドでプロジェクトを実行します。

npm start

すると、以下のようなページが開き、リンクを押すことでページ遷移をすることができるようになりました。

最後に

今回はReact Routerの基本的な使い方を勉強しました。
「Reactでページ遷移の方法がわからん…」という小さなつまづきから調べてみたのですが、ページ遷移を実装するためにライブラリをインストールする必要があるとわかったことに最初は衝撃を受けました。
フロントエンドフレームワーク（ライブラリ）はなかなか奥が深そうですね。