【React入門】React Routerでクライアントルーティング時にHttpRequestメソッドを受け取る

React Routerでクライアントルーティング時にHttpRequestメソッドを受け取る方法です。

React Routerの機能、actionを使用します。

動作環境
開発環境
構成
HttpRequestメソッドを受け取る
ルーティングの結果
今回学んだこと
おすすめの書籍
おすすめのUdemy講座
1. 関連

動作環境

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

動作環境

開発環境

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

React Routerでクライアントルーティング時にデータ取得の続きです。

構成

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

HttpRequestメソッドを受け取る

画面から送信されたrequest情報を受け取るためのActionを追加しました。詳しい処理はAction.jsx参照

パスのルートはusersが一覧表示、users/:idが1件表示となります。

データ表示用のUserDetailコンポーネントを追加しました。

loaderにはuserData:1件とusersData:全件を設定しました。

Router.jsx

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

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

action関数に引数としてrequestを定義することで、画面から送信された情報がrequestに格納されます。

requestに格納された情報を取り出す方法です。

Objectで値を取得する。

Object.fromEntries(formData)

nameで値を取得する。

formData.get('id')

以下のパスに対してRedirectします。

redirect(`/users/${id}`)

Action.jsx

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

export const action = async ({ request}) => {
    console.log(request)
    const formData = await request.formData()
    const obj = Object.fromEntries(formData)
    const id = formData.get('id')
    return redirect(`/users/${id}`)
}

一覧表示の場合はusersを返却する。

1件表示の場合はfilter関数を利用して画面から受け取ったパラメータを条件にデータを抽出しています。

画面から送信されたrequest情報を使用することでURLパラメータを取得することができる。

request.params.id

Data.jsx

export const usersData = async (request) => {
    console.log(request)
    return await { users }
}

export const userData = async (request) => {
    console.log(request)
    let user = users.filter((value) => {
        return value.id === Number(request.params.id)
    })
    return await { user }
}

const users = [
    {
        id: 1,
        name: 'tok',
    },
    {
        id: 2,
        name: 'tak',
    },
]

クライアントルーティング時に受け取ったデータを表示しています。

userDetail.jsx

import React from 'react'
import { useLoaderData } from 'react-router-dom'

export const UserDetail = () => {
    const { user, users } = useLoaderData()
    return (
        <div>
            {users && showUsers(users)}
            {user && showUsers(user)}
        </div>
    )
}

const showUsers = (params) => {
    return params.map((value) => {
        return (
            <div key={value.id}>
                id:{value.id} name:{value.name}
            </div>
        )
    })
}

Formとボタンを追加しました。入力欄の値をPOSTメソッドを使用してクライアント側に送信しています。

Demo.jsx

import React from 'react'
import { Form, 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'>
                <Form method='post'>
                    <input placeholder='id' aria-label='id' type='text' name='id' />
                    <button type='submit'>userDetail</button>
                </Form>
                <Outlet />
            </div>
        </div>
    )
}