【React入門】React Routerでクライアントルーティング時にデータ取得

React Routerでクライアントルーティング時にデータ取得をする方法です。

React Routerの機能、LoaderとuseLoaderDataを使用します。

動作環境
開発環境
構成
データ取得
ルーティングの結果
今回学んだこと
おすすめの書籍
おすすめのUdemy講座
1. 関連

動作環境

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

動作環境

開発環境

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

React Routerでクライアントルーティングの続きです。

構成

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

データ取得

データを作成します。

Data.jsx

export const usersData = async () => {
    const users = [
        {
            id: 1,
            name: 'tok',
        },
        {
            id: 2,
            name: 'tak',
        },
    ]
    return await { users }
}

loaderに受け渡したい値を指定するとクライアントルーティング時にデータ取得が行えるようになります。

Router.jsx

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

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

loaderに指定したusersDataをuseLoaderDataを使用して受け取ります。

注意点は分割代入時の変数名がusersData関数で返却した変数名となることです。

Demo.jsx

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

export const Demo = () => {
    const { users } = useLoaderData()
    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'>
                {users.map((value) => {
                    return (
                        <div key={value.id}>
                            id:{value.id} name:{value.name}
                        </div>
                    )
                })}
                <Outlet />
            </div>
        </div>
    )
}