【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
```

すると、以下のようなページが開き、リンクを押すことでページ遷移をすることができるようになりました。
![スクリーンショット 2023-05-08 23.00.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3344066/78cc10c2-d0a6-b4f3-d96d-9f14b8f8cb91.png)

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