【React入門】React Routerでクライアントルーティング

React Routerでクライアントルーティングを実装する方法です。

Feature Overview v6.23.1 | React Router

クライアントルーティングとは

従来のルーティングはクライアントからファイルを要求して、サーバー側からレスポンスとして返却されたファイルを表示させることが基本だった。

クライアントルーティングはサーバーにファイルの要求を行わずにクライアント側だけでファイルのルーティングを行うことでファイルを表示させることができる方式です。

イメージがつきやすいように図を用意しました。

従来のルーティングとクライアントルーティングのイメージ

動作環境
開発環境
レイアウト
構成
React Router
ルーティングの結果
リファクタリング
今回学んだこと
おすすめの書籍
おすすめのUdemy講座
1. 関連

動作環境

エディション	Windows 11 Home
バージョン	21H2
Node	18.15.0

動作環境

開発環境

こちらの構成で動かしています。

レイアウト

サイドバーにページ内遷移するリンクを設置。リンクを押すとコンテンツに画面が表示されるシングルページアプリケーション。

構成

src
│  index.jsx
│  Router.jsx
│  
├─css
│      demo.css
│
└─pages
        Demo.jsx

React Router

React Routerのパッケージをインストール

npm install react-router-dom

createBrowserRouterにルーティング内容を設定する。

path:パス

element:表示させたい内容

errorElement:ルーティングが存在しない場合に表示させたい内容

children:コンポーネント内にコンポーネントを表示させたい場合に指定

index.jsx

import React from 'react'
import * as ReactDOM from 'react-dom/client'
import { Demo } from './pages/Demo'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'

const router = createBrowserRouter([
    {
        path: '/',
        element: <Demo />,
        errorElement: <div>error</div>,
        children: [
            {
                path: 'demo',
                element: <div>demo</div>,
            },
            {
                path: 'demo/:id',
                element: <div>demo1</div>,
            },
        ],
    },
])

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

ルートの画面となっています。サイドバーにリンクが二つ、コンテンツにリンクに指定された内容が表示されます。

ソースコードで言うとchildrenに指定したルーティング内容がOutletに表示される。

src/pages/Demo.jsx

import React from 'react'
import { Link, Outlet } from 'react-router-dom'
import {} from '../css/demo.css'

export const Demo = () => {
    return (
        <div className='main'>
            <div className='side'>
                <div className='link'>
                    <Link to={`demo`}>demo</Link>
                </div>
                <div className='link'>
                    <Link to={`demo/1`}>demo1</Link>
                </div>
            </div>
            <div className='content'>
                <Outlet />
            </div>
        </div>
    )
}

サイドバーとコンテンツ用のcssです。

src/css/demo.css

html {
    height: 100%;
    margin: 0;
}

body {
    margin: 0;
}

ul {
    list-style: none;
    text-align: left;
}

.side {
    background-color: #eeeeee;
    width: 150px;
    height: 100vh;
    text-align: center;
}

.content {
    width: 100%;
    height: 300px;
    text-align: center;
}

.main {
    display: flex;
}

.link a {
    text-decoration: none;
}

.link:hover a {
    text-decoration: underline;
}

ルーティングの結果

/demo

/demo/1

/error

リファクタリング

ルーティング処理をコンポーネント化しました。

index.jsx

import React from 'react'
import * as ReactDOM from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import { router } from './Router'

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

Router.jsx

import { createBrowserRouter } from 'react-router-dom'
import { Demo } from '../src/pages/Demo'

export const router = createBrowserRouter([
    {
        path: '/',
        element: <Demo />,
        errorElement: <div>error</div>,
        children: [
            {
                path: 'demo',
                element: <div>demo</div>,
            },
            {
                path: 'demo/:id',
                element: <div>demo1</div>,
            },
        ],
    },
])

src/Router.jsxをさらにリファクタリングしてみました。

createRoutesFromElementsを使うとJSX構文で書けるようになります。

Routeでネストしたことによって親子関係もわかりやすくなりました。

import React from 'react'
import { Route, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
import { Demo } from '../src/pages/Demo'

export const router = createBrowserRouter(
    createRoutesFromElements(
        <Route path={'/'} element={<Demo />} errorElement={<div>error</div>}>
            <Route path={'demo'} element={<div>demo</div>} />
            <Route path={'demo/:id'} element={<div>demo1</div>} />
        </Route>
    )
)