Reactにおける画面遷移の基礎

当記事では、Reactアプリケーションで画面遷移する方法と画面遷移が必要な理由についてご紹介します。

Z-A-K-I

SPAでなぜ画面遷移が必要なんだろう？

SPAでどうやって画面遷移をするんだろう？

と、思ってる方におすすめです。

この記事では、以下のことを紹介してます。

SPAで画面遷移が必要な理由
Reactで画面遷移を行う実装方法

SPAとMPAの違い、画面遷移のメリット、React Routerを使った画面遷移の具体的な実装方法などを手順を追ってご紹介していきます。

Z-A-K-I

SPAはシングルページアプリケーション、

MPAはマルチページアプリケーションの略だよ

SPAで画面遷移が必要な理由
- SPAとMPAの方式の違い
- 画面遷移することのメリット
Reactでの画面遷移実現方法
- 画面遷移のコード
まとめ
- Reactにおける画面遷移の基礎のまとめ

SPAで画面遷移が必要な理由

MPAと比較しながら、画面遷移が必要な理由を説明します。

SPAとMPAの方式の違い

SPA（シングルページアプリケーション）では、ページの一部分だけを書き換えて内容を更新します。これに対してMPA（マルチページアプリケーション）は、画面全体を書き換えることで遷移します。

MPAでは、画面全体を書き換えるため、画面遷移するとURLが各画面のURLに変更されます。これに対し、SPAは部分書き換えのため、ページ全体が再描画されず、URLが変化しません。

※１ MPA（マルチページアプリケーション）は、複数画面で構成されるアプリケーションです。シングルページアプリケーションは反対に１画面で構成されます。

画面遷移することのメリット

画面遷移は、直感的なナビゲーションを提供し、ブラウザの履歴管理やブックマーク機能などを活用することができます。また、アクセシビリティの向上も期待できます。

以下が画面遷移を行うことで受けられるメリットです。

ユーザビリティとナビゲーション:
画面遷移は、ユーザーがアプリケーション内を移動するための自然な手段となっています。ユーザーは、画面の移動や画面遷移するアクセスに慣れています。また、画面遷移の機能を提供することで、アプリケーションの動線ナビゲーションがより直感的になります。
ユーザーの期待に合った挙動:
従来のWebアプリケーションと同じような挙動を提供することで、ユーザーはアプリケーションを使いやすいと感じることがあります。画面遷移を提供することによって、ユーザーが期待する挙動に合わせたエクスペリエンスを提供することができます。
ブラウザの機能活用:
画面遷移を再現することで、ブラウザの履歴管理やブックマーク、戻る・進む機能などが利用することができます。一般的なWebアプリケーションと同じような機能を利用できることで、ユーザーは状況に応じてブラウジングを行うことができ、使いやすく感じます。
アクセシビリティの向上:
一部のユーザーや状況において、画面遷移の再現はアクセシビリティの向上に寄与します。特定の機能や状態にアクセスするための標準的な手段を提供することで、アクセシビリティの要件を満たすことができます。
画面遷移の仕組みを導入することで、SPA内でも一般的なWebアプリケーションと同様のユーザーエクスペリエンスが提供できます。これにより、ユーザーは操作のコンテキストを理解しやすくなり、アプリケーションの使い勝手や信頼性が高まります。

Reactでの画面遷移実現方法

Reactでは、「React Router」というライブラリを利用することで画面遷移を実現できます。

npm install react-router-dom

設定方法は、ルーティング設定、RouteProviderの設定、未存在ページへの対応、ルーター対応リンクの設定などがあります。

画面遷移のコード

ReactRouterは、以下３ステップで画面遷移を設定します。

ルーティング設定

どのURLでアクセスされた時にどのコンポーネントを表示するかの設定です。

画面遷移のルーティング機能を提供するものをルーターと呼びます。ルーターを利用するために、まずはルーティング設定を行います。

ルーティング設定は、以下コードのように設定します。renderメソッドに画面遷移を定義したルーターを設定することで、コンポーネント全てがReactRouterで管理されるようになります。

ルーターの設定は、RouterProviderコンポーネントを通じて設定します。

RouteProviderの設定

import ReactDOM from'reactdom/client';
import {Route, createBrowserRouter,Route, RouterProvider} rom 'react-router-dom';

const router=createBrowserRouter(
    createRoutesFromElements(
        <>
            <Route path=""element={<MyTop/>}/>
            <Route path="hello"element={<MyHello/>}/>
            <Route path="article"element={<MyArticle/>}/>
        </>
    ));

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RouterProvider router={router}/>);

未存在ページにアクセスした場合のカスタムエラーページの表示

何もしなければ、存在しないURLにアクセスした場合、ReactRouterは標準のNotFoundページを返却します。

以下の設定をRouterProviderに設定することでカスタマイズしたページを表示させることができます。

# 以下のように設定することで存在しないページにアクセスした時にNotFoundコンポーネントを表示できる
<Routepath="*"element={<NotFound/>}/>

ルーター対応リンクの設定

以下のようにルーターに対応したリンクを設定することで、リンククリックで画面遷移することが可能となります。

# 以下のように記述し、ルーティング経由で各リンクへ画面遷移する
import {Link Outlet } from 'react-router-dom';

・・・省略・・・

# 以下のように記述し、ルーティング経由で各リンクへ画面遷移する
# 標準的なアンカータグではないことに注意。標準のアンカータグを利用しても動作するが、ページ全体がリフレッシュされる。
<Link to="/">TOP</Link><br />
<Link to="/childA">childAページ</Link><br />
<Link to="/childB">childBページ</Link><br />
# Outlet要素を配置し、App配下のコンポーネントを表示する領域を設ける
<Outlet />

コンポーネント同士の親子関係は、あらかじめルーター側で明示しておく必要があります。
親子関係はRouteタグを入れ子にすることで設定します。

const router = createBrowserRouter(
    createRoutesFromElements(
        <Route path="/" element={<TopPage />}>
            <Route path="childA" element={<ChildPageA /}　/>
            <Route path="childB" element={<ChildPageB /}
        </Route>
    )
)

ここで定義した内容のコンポーネントがタグに表示されるようになります。

また、Linkタグではなく以下のようにNavLinkタグを利用し、style属性を設定することで現在のページを強調表示などのスタイルを設定できます。ただし、この仕組みは部分一致したURLも強調表示されてしまうため、部分一致を除く属性「end」を指定することでこれを回避します。
以下の例では、childA、childBページにアクセスした時にTOPページを強調表示させないように、TOPページの属性に「end」を付与しています。

・・・省略・・・

function isCurrent(link){
    return link.isActive?{backgroundcolor:'Yellow'}:undefined;
}

<NavLink style={ isCurrent } end to="/">TOP</NavLink><br />
<NavLink style={ isCurrent } to="/childA">childAページ</NavLink><br />
<NavLink style={ isCurrent } to="/childB">childBページ</NavLink><br />
# Outlet要素を配置し、App配下のコンポーネントを表示する領域を設ける
<Outlet />