Laravelプロジェクト内のReactでのルーティング方法

前提
今回使用するファイル群
各ファイルのコード（上記表の上から順）

前提

前提としてLaravelプロジェクトのresources ディレクトリ直下にts ディレクトリを作成し、その中でReactのコードを書いていこうと思います。

また、Viteを使用しています。

今回使用するファイル群

（触らないものは省略しています）

.
├── resources/
│		├── ts/
│		│		├── components/
│		│		│		└── Atoms/
│		│		│				└── Loading.tsx
│		│		├── consts/
│		│		│		└── UriConsts.ts
│		│		├── Pages/
│		│		│		└── Member/
│		│		│				└── MyTask/
│		│		│						└──MyTaskList.tsx
│		│		├── router/
│		│		│		└── MemberRouter.tsx
│		│		├── types/
│		│		│		└── commonTypes.ts
│		│		└── app.tsx
│		└── views/
│				└── app.blade.php
└── routes/
		└── web.php

各ファイルのコード（上記表の上から順）

Loading.tsx

ローディングアイコンを表示させるファイルです。

import * as React from 'react'
import CircularProgress from '@mui/material/CircularProgress'
import Box from '@mui/material/Box'

export default function Loading() {
    return (
        <Box sx={{ display: 'flex' }}>
            <CircularProgress />
        </Box>
    )
}

UriConsts.ts

URIを定義するファイルです。

export enum UriEnum {
    MyTask = '/mytask',
}

MyTaskList.tsx

表示したい画面のファイルです。

import React from 'react'

const MyTaskList = () => {
  return (
    <div>MyTaskList</div>
  )
}

export default MyTaskList

MemberRouter.tsx

ルーティングをしているファイルです。

import React, { lazy } from 'react'
import { Route, Routes } from 'react-router-dom'
import { UriEnum } from '../consts/UriConsts'
import { RouteMappingType } from '../types/commonTypes'

// マイタスク
const MyTaskList = lazy(() => import('../Pages/Member/MyTask/MyTaskList'))

// パス コンポーネント のマッピング
const RouteMapping: RouteMappingType[] = [
    // マイタスク
    { path: UriEnum.MyTask, element: <MyTaskList /> },
]

const MemberRouter: React.FC = () => {
    return (
        <>
            <Routes>
                {RouteMapping.map((route, key) => (
                    <Route
                        key={key.toString()}
                        path={route.path}
                        element={route.element}
                    />
                ))}
            </Routes>
        </>
    )
}

export default MemberRouter

commonTypes.ts

型定義をしているファイルです。

// ROUTEのマッピングタイプ
export type RouteMappingType = {
    path: string
    element: JSX.Element
}

ts/app.tsx

一番大元のファイルです。

import React, { Suspense } from 'react'
import { BrowserRouter } from 'react-router-dom'
import MemberRouter from './router/MemberRouter'
import { createRoot } from 'react-dom/client'
import Loading from './components/Atoms/Loading'

const App: React.FC = () => {
    return (
        <>
            <Suspense fallback={<Loading />}>
                <BrowserRouter>
                    <MemberRouter />
                </BrowserRouter>
            </Suspense>
        </>
    )
}

if (document.getElementById('app')) {
    const root = createRoot(document.getElementById('app')!)
    root.render(<App />)
}

app.blade.php

Laravelのbladeファイルです。

@viteの 'resources/ts/app.tsx' の部分を大元のファイルと合わせておいてください。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>ImprovePartner</title>

        @viteReactRefresh
        @vite(['resources/css/app.css', 'resources/ts/app.tsx'])

    </head>
    <body class="antialiased">
        <div id="app"></div>
    </body>
</html>

web.php

Laravelのルーティングのファイルです。

こちらを記述することでどんなパスが来てもReactに飛ぶようになっています。

Route::get('{any}', function() {
    return view('app');
})->where('any', '.*');