はじめに
こちらの記事で少し触れたreact-routerについて、基礎的なところから改めてまとめてみます。
業務で使ってはいるものの、よくわからないまま使っているので、ちゃんと自分の血肉とできるようにします。
そもそもクライアントサイドルーティングとは
普段インターネットでwebページを閲覧する場合、「このページください」とサーバーにリクエストして、サーバーが該当ページのhtmlを返してくれるという仕組みで成り立っています。
これがサーバーサイドルーティングです。
サーバーから新しくページを取得してそれを表示するので、新たに色々読み込む処理が発生します。
一方、クライアントサイドルーティングは、上記の動きをしません。
あるページのリンクにアクセスされた場合、新しくhtmlを取得することなく、表示しているページのまま、Reactの処理によって新しいページが取得されたかのような動きをします。
新しく諸々を読み込む必要がないので、サクサク動くというのがメリットのようです。
まずは環境構築
Node.jsが導入されていることと、VS Codeが導入されていることが前提となります。
また、使用しているPCのOSはMacになります。
色々実施していますが、react-router-domをインストールすれば、クライアントサイドルーティングを実行するための環境構築は完了です。
任意のフォルダで以下のコマンドを実行します。
今回のReactの実行環境はviteで作成します。
npm create vite
プロジェクト名と、何の言語を使うか聞かれるので今回は以下の通り設定します。
ReactとTypeScriptの組み合わせで作っていきます。
完了したら、作成したプロジェクトに移動して、React Routerをインストールします。
このReact Routerがクライアントサイドルーティングのために必要なモジュールです。
cd [作成したプロジェクト]
npm install react-router-dom
少し時間を置くと、以下のように完了します。
インストールが完了したらVS Codeで作成したプロジェクトを開きます。
VS Codeのターミナルから以下のコマンドを実行してアプリを立ち上げます。
npm run dev
以下のように表示が変わるので、LocalのURLにアクセスします。
以下のような画面が表示されれば、準備完了です。
基本のルーティング
まずは基礎的なルーティング方法について確認します。
事前準備
コンポーネントを2つ用意します。
まずはTOP画面用です。
import { Link } from "react-router-dom";
const TopComponent = () => {
return (
<>
<h1>Top画面</h1>
<Link to="another">別の画面へ</Link>
</>
);
};
export default TopComponent;
ポイントはReactRouterのLinkコンポーネントを使っているところです。
このコンポーネントを使用すると、aタグが生成されます。
そして、to属性に指定した値がhref属性に設定されます。
ただし、通常のaタグとは挙動が異なり、ページ全体の再読み込みをしません。
次に遷移先の別画面を用意します。
const AnotherComponent = () => {
return (
<>
<h1>別の画面</h1>
</>
);
};
export default AnotherComponent;
これはただの表示用なので特にポイントはありません。
ルーティング処理
既存のmain.tsxの処理を以下のように書き換えます。
import React from "react";
import ReactDOM from "react-dom/client";
import {
RouteObject,
RouterProvider,
createBrowserRouter,
} from "react-router-dom";
import TopComponent from "./TopComponents.tsx";
import AnotherComponent from "./AnotherComponent.tsx";
const routes: RouteObject[] = [
{
path: "/",
element: <TopComponent />,
},
{
path: "/another",
element: <AnotherComponent />,
},
];
const router = createBrowserRouter(routes);
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
ポイントは3つです。
1. ルーティング用情報の生成
routesのようなルーティング情報を設定したオブジェクトの配列を作ります。
オブジェクトのプロパティには様々なものが設定できます。
基本としては「path」と「element」の2つがあれば十分です。
「path」は遷移させたいパスを、
「element」は「path」にアクセスされたとき表示させたい要素を指定します。
2. Routerオブジェクトの生成
ルーティング情報をcreateBrowserRouterの引数に設定することで、Routerオブジェクトを取得できます。
3. RouterProviderコンポーネントの使用
このコンポーネントのpropsに生成したRouterオブジェクトを渡します。
これで、基本のルーティング処理は完了です。
挙動の確認
実際の動きを見てみましょう。
ルートパスでは、TOP画面が表示されます。
リンクをクリックしてみましょう。
サーバーサイドの処理は何も書いていませんが、別画面を表示することができました。
また、開発者モードを起動して、ネットワークタブを開いてもらうとわかるのですが、この遷移のとき、新しい情報が読み込まれていないのがわかります。
（画面キャプチャで確認するのは難しいので、省略します。）
これが、基本のルーティングです。
まとめ
今回は基本的なルーティングのみにとどめて、ReactRouterの使い方を確認しました。
普段私がやっている方法とは違っていたので、やはり基礎を押さえることが大事だな、と思いました。
（とくにLinkコンポーネントの部分）
次回（明日）は更にいろいろなことに挑戦してみます。