Reactで条件検索をする時にURLへクエリパラメーターを付与したい

Reactで条件検索をする時に、GETリクエストへパラメーターを含めて送信するだけでなくURLにも付与したいということがあると思います。
本記事では、検索時にURLへクエリパラメーターを付与する簡単な実装方法を紹介します。

実装方針

• 最初の画面アクセス時は、URLから検索条件のクエリパラメーターを取得してGETリクエストのパラメーターに含める
• 検索時は、GETリクエストのパラメーターに条件となる値を含め、URLにクエリパラメーターを付与する

具体的な実装

URLからクエリパラメーターを取得してGETリクエストにセット

最初のアクセス時に、URLから検索条件のクエリパラメーターを取得してGETリクエストに含めるための実装です。

const searchParams = new URLSearchParams(window.location.search);
const [text, setText] = useState<string>(searchParams.get('text'))
const [categories, setCategories] = useState<string[]>(searchParams.get('categories')?.split(',') || [])

useEffect(() => {
  // TODO: URLに含まれるクエリをGETリクエストにセットして実行
}, [])

検索時にURLへパラメーターを含める

検索時に実行される関数の中で、URLにクエリパラメーターを付与できるようにします。

const onSubmit = () => {
  const params = {}
  if (text) params['text'] = text
  if (categories) params['categories'] = categories
  
  const urlSearchParam =  new URLSearchParams(params).toString()
  navigate('/search?' + urlSearchParam)
}

URLに変化があったことを検知してGETリクエストを実行

ここまででURLの切り替えはできるようになりましたが、パスは/searchのままなので最初に実装したuseEffectは実行されません。
つまり、検索が実行されないということです。
そのため、window.location.hrefをuseEffectの第二引数に渡してクエリパラメーターが付与されたタイミングでGETリクエストを実行できるようにします。

const searchParams = new URLSearchParams(window.location.search);
const [text, setText] = useState<string>(searchParams.get('text'))
const [categories, setCategories] = useState<string[]>(searchParams.get('categories')?.split(',') || [])

useEffect(() => {
  // TODO: URLに含まれるクエリをGETリクエストにセットして実行
}, [window.location.href])

参考