理系公務員のプログラミング日記

Reactとルーティング

標準のReactはSPA(シングルページアプリケーション)なので、単一のページしか対応しません。 React-Routerというライブラリを追加して、ルーティングに対応させます。

*このReact-Routerはバージョンアップの際に破壊的変更が何度か行われています。ネットで記事を探すときやChatGPTに出力させる際は気を付けてください。

以下は最新のv6のサンプルです。

React-Router

まず最初にreact-routerライブラリをインストールします。

v6からは下記のように一つライブラリだけインストールすればOKになりました。

npm install react-router-dom

インストールしたreact-router-domから利用するcomponentをインポートします。

App.jsx

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Home } from './components/Home';
import { About } from './components/About';


const App = () => {

  return (
    <>
      <h1>ルータ外の共通レイアウト</h1>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </BrowserRouter>
    </>
  )

このように実装することで、ドキュメントルートではHomeコンポーネントが表示され、 /aboutでAboutコンポーネントが表示されます。

重要な仕様として、Routeコンポーネントで定義したpathに対してのみ、後述するLinkコンポーネントの遷移先として使用できます。

またURLとして扱うことになるpathは小文字にしましょう。

各ページで共通のレイアウトはの外に定義してください。

次にリンク先となるHomeコンポーネント、Aboutコンポーネントを作ってみます。

LinkコンポーネントはReactの中でタグの代わりを果たすcomponentです。

import { Link } from 'react-router-dom'

export const Home = () => {
    return (
        <div>
            <h2>Homeコンポーネント</h2>
            <Link to="/about">Aboutに移動する</Link>
        </div>
    )
}

import { Link } from "react-router-dom";

export const About = () => {
    return (
        <div>
            <h2>Aboutコンポーネント</h2>
            <Link to="/">Homeに移動する</Link>
        </div>
    )
}