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])

参考

https://qiita.com/nisyuu/items/e300ccd597ac8248352f

https://qiita.com/nisyuu/items/26c5913bad0bc4d3060d