目的
React Routerを使った画面遷移ができるようになることを目指します。
React初心者（筆者）が手間取った、画面遷移の手順について、図を用いて解説します。
実施した環境
- viteを使ったReactプロジェクト（作成手順)
目次
- 画面遷移の流れを理解する
- react-router-domのインストール
- main.jsxの変更
- Routes.jsxの作成
- 遷移したいページを作る
- 画面遷移の確認
- 気をつけるべき点
- 総括
- 参考
1. 画面遷移の流れを理解する
まず、画面遷移の流れについて、以下のファイルを使って説明します。
- pageA.jsx （遷移元のファイル）
- pageB.jsx （遷移先のファイル）
- Routes.jsx（ルーティングの設定ファイル）
- main.jsx（Routes.jsxを参照するファイル）
まず、main.jsxで、Routes.jsxを参照します。Routes.jsxにはどのページ（ファイル）を表示させるかが書いてあります。これに従って、遷移します。
気をつけるべき点はRoutes.jsxにはブラウザのURLを指定することです。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が起動するはずです。
ボタンをクリックすると、pageBと表示されるはずです。
この時、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として読み込んだ方が統一感が出て良いのではないか」と思われた方もいるでしょう。
実はpageAとして読み込むとエラーが出ます。実際にpageAと変更すると、ブラウザのデベロッパーツールのコンソールに、以下のエラーが出ます。
内容は「pageAの頭文字を大文字にしてください」というものです。
以上より、読み込む名前を変えるのではなく、ファイルの名前の頭文字を大文字にすることで、統一感を出せます。（今回の例では、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)