React Routerを使ってみた

1. はじめに

ReactはSPA(Single Page Application)だけれども、ページ遷移的なことをやりたいときもあるので、それをそれっぽくSPAで実現するためのモジュール React Router を使ってみたメモです。

• バージョン
  • react: 18.2.0
  • react-router-dom: 6.22.0

ソースは下記

2. 準備

create-react-appして、npm i react-router-dom。
ページごとの*.jsを作ります。が、そこをがっつり省略するために、下記を準備。

pages.js

export const TopPage = () => <>トップページ！</>;
export const Page1 = () => <>Page1です</>;
export const Page2 = () => <>Page2だよ</>;
export const PageNotFound = () => <>Not Foundです！</>;

あえて日本語を入れる方が、システムが自動で作った文字列と区別しやすいので、サンプルとか試行では私は入れる派。

3. 手順というか１手だけ

App.js上だけで実装します。本来は、BrowserRouterは、index.jsなど最上位で呼び出すのが良いですが、全体を把握するためのサンプルです。

App.js

import { BrowserRouter, Link, Routes, Route } from "react-router-dom";
import { TopPage, Page1, Page2, PageNotFound } from "./pages";

function App() {
    return (
        <BrowserRouter>
            <header>
                <Link to="/">トップ</Link>｜
                <Link to="/page1">ページ１</Link>｜
                <Link to="/page2">ページ２</Link>
            </header>
            <main>
                <Routes>
                    <Route path="/" element={<TopPage />} />
                    <Route path="/page1" element={<Page1 />} />
                    <Route path="/page2" element={<Page2 />} />
                    <Route path="*" element={<PageNotFound />} />
                </Routes>
            </main>
        </BrowserRouter>
    );
}

export default App;

• <BrouserRouter>の中の、<Routes>の<Route>が、URLに対応する適切なものが選択されて表示されるという仕組みです。
• <Link>からの遷移も、URLを直書きしたときも、動作は同じ。
• そのまんまですが、page1にアクセスしたときの様子。
  • 
  • 他のページへ遷移したときも、ヘッダーは動かないです。
• path="*"は、switch文のdefaultみたいなイメージ。上記全部以外のときです。

以下はプラスアルファの話

• <Link>のtoと、<Route>のpathに同じ値を書くのは気持ち悪いですね。本番では、変数定義したいところです。
• <header>、<main>はなくてもいいですが、<main>の中が書き換わるというイメージがよいかと思うのでそうしてみました。

4. おわりに

サクッとできたのですが、それゆえに、シンプルな解説ページがなさそう（ついでにいろいろやってしまう）ので、ご紹介でした。自分の備忘録もかねて。

疑問点としては、これをHTTPサーバーに置いたとき、どうなるのかな。そこを解決しとかないと、おもちゃで終わってしまう。。でもここでは、書き方だけにとどめて終わります。

5. リンク

• React Routerの公式HP
  • React Router