【React】図でわかる！初心者のためのReact Routerによる画面遷移の手順

# 目的
　React Routerを使った画面遷移ができるようになることを目指します。
　React初心者（筆者）が手間取った、画面遷移の手順について、図を用いて解説します。

 # 実施した環境
 * viteを使ったReactプロジェクト（[作成手順](https://ja.vite.dev/guide/))

 # 目次
 1. 画面遷移の流れを理解する
 1. react-router-domのインストール
 1. main.jsxの変更
 1. Routes.jsxの作成
 1. 遷移したいページを作る
 1. 画面遷移の確認
 1. 気をつけるべき点
 1. 総括
 1. 参考

 # 1. 画面遷移の流れを理解する
 　まず、画面遷移の流れについて、以下のファイルを使って説明します。
* pageA.jsx （遷移元のファイル）
* pageB.jsx （遷移先のファイル）
* Routes.jsx（ルーティングの設定ファイル）
* main.jsx（Routes.jsxを参照するファイル）

![Routeの図_page-0001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884269/d2e7319a-7db0-4e71-a982-1225234eb228.jpeg)


　まず、main.jsxで、Routes.jsxを参照します。Routes.jsxにはどのページ（ファイル）を表示させるかが書いてあります。これに従って、遷移します。
　気をつけるべき点はRoutes.jsxには<font color="red">**ブラウザのURLを指定する**</font>ことです。HTMLのaタグでは、現在のファイルからの相対パスなどを指定していました。しかし、React Routerでは、ブラウザのURLを指定して、そのURLに対してページ（ファイル）を紐づけます。
　サーバーを立ち上げた時点ではデフォルトのURLは "/" です。よって、pageA.jsxが表示されています。
 pageB.jsxに遷移させる際はブラウザのURLを "/pageB" にすることで、pageB.jsxが表示されます。
　それでは実際に画面遷移を行ってみたいと思います。
# 2.react-router-domのインストール
　React Routerを使うために、react-router-domをインストールします。ターミナルで次のコマンドを打ち込みます。
```
$ npm install react-router-dom
```
　現在は自動的に環境変数が設定されているはずです。プロジェクト直下の、package.json を確認すると、dependenciesにreact-router-domと書かれているのがわかります。
```
$ less package.json
# /react-router-dom と打つと、該当場所が光り、設定されていることが確認できる
# 戻る時は、qを1回おす
```
# 3.main.jsxの変更
　main.jsxを以下のように変更します。
```
// src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

// React Router を使うためのいろいろなもの
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { AppRoutes } from './Routes.jsx' // Routes.jsxを参照

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>
  </StrictMode>
)
```
　AppRoutesがRoutes.jsxファイルのルーティングを参照します。
# 4.Routes.jsxの作成
　Routes.jsxは、プロジェクト作成時には存在していません。srcディレクトリ直下に、Routes.jsx ファイルを作成して、以下を書きます。
 ```
 // src/Routes.jsx
import { Routes, Route } from "react-router-dom";
import PageA from "./pageA.jsx"; // pageA.jsxの読み込み
import PageB from "./pageB.jsx"; // pageB.jsxの読み込み

export const AppRoutes = () => {
    return (
        <Routes>
            <Route path="/" element={<PageA />} />
            <Route path="/pageB" element={<PageB />} />
        </Routes>
    )
}
```
　Routes.jsxにpageA.jsxとpageB.jsxのルーティングを書きました。
```
<Route path="/" element={<PageA />} />
```
　ブラウザのURLが"/"の時にpageAを呼び出しています。pageAは、上部でpageA.jsxをインポートしています。
 ```
 import PageA from "./pageA.jsx"; // pageA.jsxの読み込み
 ```

# 5.遷移したいページを作る
　遷移元をpageA.jsx、遷移先をpageB.jsxとします。どちらも srcディレクトリ直下に作ります。
```
// src/pageA.jsx
import { useNavigate  } from 'react-router-dom' // React Routerを使うためのもの

function pageA(){
    const navigate = useNavigate()
    const changePage = () =>{
        navigate('/pageB')
    }
    return (
        <>
        <h1>pageA</h1>
        <button onClick={changePage}>pageBへ遷移</button>
        </>
    )

}
export default pageA
```
　pageA.jsxでは、useNavigateを使って画面遷移します。ボタンをクリックすることで、changePageが呼び出され、Routes.jsxの"/pageB"に指定されたページを表示させます。
```
// src/pageB.jsx
function pageB(){
    return (
        <>
        <h1>pageB</h1>
        </>
    )

}
export default pageB
```
　pageB.jsxでは単にpageBとだけ表示させます。
# 6.画面遷移の確認
　それでは、遷移することを確認してみます。次のコマンドで、サーバーを起動させます。
 ```
 $ npm run dev
 ```
 　そうすると、pageAが起動するはずです。
  ![スクリーンショット 2024-10-07 10.06.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884269/93c1be99-f03e-214c-fcbb-298b6f14e57d.png)
ボタンをクリックすると、pageBと表示されるはずです。
![スクリーンショット 2024-10-07 10.06.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884269/abd4d8d2-8d27-98c6-8332-3b080ca0f6fd.png)
この時、URLも"/pageB"となっているのがわかります。
　以上で、ページの遷移が正しく行えていることを確認できました。サーバーを切断する際はターミナルで、ctrl+cを押してください。

# 7.気をつけるべき点
　遷移元、遷移先を、pageA.jsx、pageB.jsxとしました。しかしRoutes.jsxでは、PageAとして読み込んでいました。
 ```
 // pageA.jsxをPageAという名前で読み込んでいる。
 import PageA from "./pageA.jsx"; // pageA.jsxの読み込み
 ```
「pageA.jsxなのだから、pageAとして読み込んだ方が統一感が出て良いのではないか」と思われた方もいるでしょう。
　実は<font color="red">pageAとして読み込むとエラーが出ます</font>。実際にpageAと変更すると、ブラウザのデベロッパーツールのコンソールに、以下のエラーが出ます。
 ![スクリーンショット 2024-10-07 8.34.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884269/574939d2-7e9a-ad2f-3560-e22a25e804dc.png)
　内容は「pageAの頭文字を大文字にしてください」というものです。
　以上より、読み込む名前を変えるのではなく、<font color="red">ファイルの名前の頭文字を大文字にする</font>ことで、統一感を出せます。（今回の例では、pageA.jsxではなくPageA.jsxにする。）


 # 8.総括
 　今回はReact Routerを使って画面遷移を行いました。aタグを使った場合と異なり、URLを指定する必要があります。Routes.jsxファイルに、ルーティングがまとめて書かれていることで、画面遷移のパスを管理しやすいというメリットもあります。
　Routes.jsxでファイルを読み込む際は、大文字から始めましょう。それに伴い、ファイル（コンポーネント）の名前も大文字から始めると、統一感が出て良いです。
  
  
# 9.参考
　この記事は以下の情報を参考に書きました。
 * [React][初学者向け]react-router-domで画面遷移をさせる方法(https://qiita.com/ShoChanHobby/items/c4e2c2b9bb510be2efe8)
 * React Router(https://reactrouter.com/en/main/start/overview)