Laravel + react router dom の簡易動作確認

目的

ルートパラメータを柔軟に取得したい。

コード

web.php の内容

<?php

use Illuminate\Support\Facades\Route;

Route::view('/test1/{value1?}/{value2?}', 'test1');

test1.blade.php の内容

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>test1.blade.php</title>

    @vitereactrefresh
    @vite('resources/tsx/entry/Test1.tsx')
    @vite('resources/css/app.css')
</head>

<body>
<div>
    test1.blade.php
</div>
<div id="root"/>
</body>
</html>

Test1.tsx の内容

import React from 'react';
import ReactDOM, { Container } from 'react-dom/client';
import Component from '../Component.tsx';
import { createBrowserRouter, RouterProvider } from 'react-router-dom'

const route = createBrowserRouter([
                                      {
                                          path: '/',
                                          element: <div>Slash</div>,
                                      },
                                      {
                                          path: '/:value1',
                                          element: <Component/>,
                                      },
                                      {
                                          path:'/:value1/:value2',
                                          element: <Component/>,
                                      },
                                  ],
                                  {
                                      basename: '/test1',
                                  })

ReactDOM.createRoot(document.getElementById('root') as Container).render(
    <React.StrictMode>
        <div>
            Test1.tsx
        </div>
        <hr/>
        <RouterProvider router={route}/>
    </React.StrictMode>,
);

Component.tsx の内容

import { ReactNode } from 'react';
import { useParams } from 'react-router-dom'

function Component (): ReactNode {
    const routeParameter = useParams<string>();
    return (
        <>
            <div>
                Component.tsx
            </div>
            <div>
                value1 = {routeParameter.value1}
            </div>
            <div>
                value2 = {routeParameter.value2}
            </div>
        </>
    );
}

export default Component;

動作確認

上記コードを配置し、下記3つのアドレスにアクセスすると良い。

  • https://ドメイン/test1(Slash とだけ表示されるはず)
  • https://ドメイン/test1/a(value1 = a, value2 = と表示されるはず)
  • https://ドメイン/test1/a/b(value1 = a, value2 = b と表示されるはず)

コメント

タイトルとURLをコピーしました