shinke1987.net
雑多な備忘録等のはず。
他のカテゴリ・タブ
目次
PR

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

2024-05-31 2024-05-31
カテゴリ： Laravel React

目的

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

コード

web.php の内容

1
2
3
4
5
<?php
 
use Illuminate\Support\Facades\Route;
 
Route::view('/test1/{value1?}/{value2?}', 'test1');

test1.blade.php の内容

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<!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 の内容

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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 の内容

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
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つのアドレスにアクセスすると良い。

同一カテゴリの記事