Gatsbyのコンポーネントでlocationを扱う方法

Gatsbyのコンポーネント内でlocation.hrefを使うと、以下のようなエラーが出る。今回は、以下のエラー対応をメモしていく。

"location" is not available during server side rendering

@reach/routerをインストール

$ yarn add @reach/router

コンポーネントで@reach/routerを使用する

@reach/routerをインポートしてそのままタグとして使えばOK!

.tsx

import React from 'react';
import { Location } from '@reach/router';

export default () => (
  <Location>
    {({ navigate, location }) => /* ... */}
  </Location>
)

gatsbyのissue の記事を参考にさせていただきました。