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

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

Feature Overview v6.18.0

reactrouter.com

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

動作環境

開発環境

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

【React】最低限の構成で動かしてみる

Reactプロジェクト作成時の構成理解と最低限の構成でReactを動かしてみるための手順。

tokuty.com

2023.02.17

レイアウト

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

構成

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

React Router

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

npm install react-router-dom

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

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>
    )
)

GitHub - TokutyTok/React-Code-Collection at feature/router

Reactのコード集. Contribute to TokutyTok/React-Code-Collection development by creating an account on GitHub.

github.com

今回学んだこと

おすすめの書籍

おすすめのUdemy講座

モダンJavaScriptの基礎から始める挫折しないためのReact入門

【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座