GatsbyJSで現在のページのURLを取得する

2021-06-08

#GatsbyJS

やりたいこと
実装方法
うまくいかなかったパターン

やりたいこと

ブログにAboutページを追加した際、bioエリアに「こちら」的なアンカーを設定した。
ただ、Aboutページを開いている場合にはアンカーは表示させたくない。
そのため、現在のURLを取得しトップページの場合のみアンカーを表示させるようにしたい。

実装方法

Gatsbyに含まれている @reach/router を利用することで、URLが取得できた。

import * as React from "react"
import { useStaticQuery, graphql, Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"
import { useLocation } from "@reach/router" // ★追加

import Sns from "../components/sns"

const Bio = () => {
  const data = useStaticQuery(graphql`
    ...
  `)

  const location = useLocation()
  const rootPath = `${__PATH_PREFIX__}/`
  const isRootPath = location.pathname === rootPath
  let about

  // ★ トップページの場合は変数aboutにアンカー用のHTMLを設定
  if (isRootPath){
    about = (
      <span>当サイトについては<Link to="/about">こちら</Link>。</span>

    )
  }

  return (
    /* 適当な場所に{about}を表示させる */
  )
}

export default Bio

うまくいかなかったパターン

最初、bio.jsの親要素となるindex.jsからlocationをpropsで受け取り表示させようとしたが、location.pathnameがundefindとなり利用できなかった。

同じようにindex.jsからlocationをpropsで受け取っているLayout.jsでは問題なくlocationを利用できている。
なぜbio.jsで出来ないのかが不明。色々と調べてみたが、分からなかった。