目的
ルートパラメータを柔軟に取得したい。
コード
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 と表示されるはず）