【Laravel・React】Ziggyでクエリパラメータを取得して検索ワードを保持する

公開: 2023-10-31

はじめに

Laravel, Reactでクエリパラメータによる検索機能を作っている時、JSX上でパラメータを取得して検索フォームに保持したいという場面がありました。

Reactでクエリパラメータを取得する方法を調べると、React Routerを使う方法が出てきます。ただ、他の方法もないか探していたら、自分の場合は既にインストールしていたZiggyパッケージを使う方法が一番簡単にできることがわかったためメモします。

対象:

  • Laravel, Reactを使っている
  • Ziggyパッケージを使っている

環境:

  • PHP: 8.2.x
  • Laravel: 10.x
  • React: 18.2.0

Ziggyインストール方法:

  1. composerでインストール: composer require tightenco/ziggy
  2. エントリポイントのbladeファイルに@routesディレクティブを追記

Ziggy公式:

Ziggyでクエリパラメータを取得する方法

方法: route().paramsを使う

// 現在のURL: http://localhost:8000/users?keyword=test&page=1　の場合

route().params; // {"keyword":"test","page":"1"} を取得

値は全てstringになります。

参照: GitHub - tighten/ziggy: Use your Laravel routes in JavaScript.

実用例

自分はInertiaを使っているため、以下のコードをはInertiaを使った実装例です。

まずはroute().paramsで取得したオブジェクトを変数paramsにセット。

const params = route().params;

InertiaのuseFormを使ってdataにクエリパラメータから取得したkeywordに対応する値を初期値としてセットします。値がない時は空文字をセットします。

const { data, setData, get, errors } = useForm({
  keyword: params.keyword || "",
});

検索フォームのvalueにdata.keywordをセットします。

<input
  type="search"
  name="keyword"
  value={data.keyword}
  onChange={(e) => setData('keyword', e.target.value)}
  onBlur={submit}
  className={`input-field ${errors.keyword ? 'is-invalid' : ''}`}
  placeholder="検索ワード"
/>

これで、ページをリロードしたりページ遷移後にブラウザバックしたりしても、検索中の値を検索フォームに保持することができました。