ようやくページネーションが実装できました

ウェブの海

トップページご覧になりました?
やっとページネーションが実装できました。

なぜか渡らない値

参考にしたのはこちら
英語ですが、更新が最近だったので日本語情報より参考になるかもしれません。現時点で。

まずはプラグインをインストールします。

$ npm i gatsby-awesome-pagination

ページネーションのプラグインは他にもありますが、情報が1番多かったのが上記でした。

npmのテキストをかなり乱暴に訳して読み、どうもcontextに値が渡るらしいことが判明。
しかし、リンクはなぜかすべて「/」になってしまい、値を見てみると「object(要は空っぽ)」になってました。

propsよりもpageContextで渡す

こちらの方が確実のようでした。
ページネーションだけ取り出したソースがこちら。

import React from "react"
import { Link } from "gatsby"

const Pager = ({ pageContext }) => {
  const { previousPagePath, nextPagePath } = pageContext
  return (
    <ul>
      {previousPagePath && (
        <li><Link to={previousPagePath}>Newer</Link></li>
      )}
      {nextPagePath && (
        <li><Link to={nextPagePath}>Older</Link></li>
      )}
    </ul>
  )
}

export default Pager

やっとできました。
これが何かのまちがいだったらちょっと泣いてしまいます。

タイトルとURLをコピーしました