[React Router] ページ遷移時に処理するカスタムフックを作ってみよう

小ネタです。

React.jsでSPAを作るときに、React Routerを使ってルーティングすることがよくあるかと思います。

React Routerのバージョン5では useHistory というフックAPIで得られるhistoryオブジェクトの history.listen() を利用してパス変更時に指定した処理を実行する（イベントを仕込む）ことができたのですが、バージョン6では変更が加わって以前と同じ方法が採れなくなっていました。（※ 将来的に変わるかもしれないので都度APIをチェックしてみてください）

React Routerのアップグレード作業をしていたときに、ページ遷移時に何かしらの処理をするカスタムフックを考えてみたので、それをここにメモっておきます。

import { useEffect, useRef } from 'react'

// ※ React Router v6
import { Location, useLocation } from 'react-router-dom'

const useLocationChange = (callback: (location: Location) => void) => {
  const refCallback = useRef<undefined | ((location: Location) => void)>()
  const location = useLocation()

  useEffect(() => {
    refCallback.current = callback
  }, [callback])

  // ロケーションに変更があったときに処理実行
  useEffect(() => {
    if (refCallback.current) {
      refCallback.current(location)
    }
  }, [location])
}

export default useLocationChange

とりあえず、フック名は useLocationChange としました。利用する際は適宜変えていただければOK。

引数にはURLが変わったときに処理する関数 callback をとるようにしています。関数 callback の引数 location はあってもなくても良いです。

使い方は簡単。

import React from 'react'
import useLocationChange from 'path/to/useLocationChange'

const SampleComponent = () => {
  useLocationChange((location) => {
    console.log(location.pathname)
  })
  return <div>Sample Component</div>
}

export default SampleComponent

以上。よかったら使ってみてください。👋