Laravel × React × Inertiaで戻るボタンを実装する

概要

LaravelのSPAツールであるInertia環境下で前のページに戻るボタンを実装する。

環境

• Laravel 9
• Inertia
• React

方法

Laravel側の実装

Inrertiaのshare dataを利用して、前のページのURLを渡す。

// middleware/HandleInertiaRequests.php
public function share(Request $request): array
{
    return array_merge(parent::share($request), [

        // その他のshare dataは省略

        'prevURL' => function() {
            return url()->previous();
        }
    ]);
}

React側の実装

usePageフックを使用し、share dataを受け取る

import { usePage, Link } from '@inertiajs/inertia-react'

const BackButton = () => {

    // usePageからprevURLを受け取る
    const prevURL = usePage().props.prevURL;

    return(
    <>
        <Link href={prevURL}>戻るボタン</Link>
    </>    
    );
}

export default BackButton;