NextJSやGatsbyで現在のパス（location）を取得する方法メモ

最近になって本格的に、NextJSやGatsbyを利用するようになって、ルーティング周りを任せられる彼らの素晴らしさを感じています。

以前は、Reactをバニラで書いて（そんな言い方しない？笑）、ReactRouter導入してルーティング周りをせっせと書いていました。

しかし、いざパンくずやlocationに応じて、UIの可変を行いたい場合に、現在のパスってどうやって取得するのかが、わからなかったのでNextJSとGatsbyそれぞれ調べてみました。

NextJSでパスを取得する

NextJSでは、next/routerからuseRouterというhookが用意されており、これを利用することで簡単に現在のパスを取得することができるようです。

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = {
    marginRight: 10,
    color: router.asPath === href ? 'red' : 'black',
  }

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

export default ActiveLink

出典：https://nextjs.org/docs/api-reference/next/router#userouter

Gatsbyでパスを取得する

Gatsbyの場合ルーティングは、reach/routerが採用されています。
追加で導入する必要はないようで、そのまま呼び出してあげて利用できました。

import { useLocation } from "@reach/router"

const useAnalytics = (props) => {
  const location = useLocation();

  useEffect(() => {
    ga.send(['pageview', location.pathname]);
  }, [])
}

出典：https://reach.tech/router/api/useLocation

参考：https://www.gatsbyjs.com/docs/reach-router-and-gatsby/

さいごに

NextJSは最近使い始めたのですが、今までライブラリを選んで、手実装していた部分がいとも簡単に構築されているフレームワークの便利さに驚きました。

これ以外の選択肢が選べませんね。