reactjs - react-share 和 next.js 出现 404 错误

Question

我用 next.js 构建了一个应用程序。有些页面是使用 getStaticProps 和 getStaticPaths 动态构建的。我希望用户能够在社交媒体上分享该页面。我正在为此使用 react-share 模块。该模块在 Twitter 上运行良好，但在 facebook 上出现 404 错误。

这是我的共享组件的代码：

import {
  FacebookShareButton,
  TwitterShareButton,
  VKShareButton,
} from "react-share"
import { FacebookIcon, TwitterIcon, VKIcon } from "react-share"

export default function ShareButtons({ data }) {
  return (
    <div className="share-buttons">
      <FacebookShareButton
        subject={`${data.title} from Online Primary Sources`}
        url={`https://onlineprimarysources.cercec.fr/sources/${data.id}`}
      >
        <FacebookIcon size={40} round />
      </FacebookShareButton>
      <TwitterShareButton
        url={`https://onlineprimarysources.cercec.fr/sources/${data.id}`}
      >
        <TwitterIcon size={40} round />
      </TwitterShareButton>
      <VKShareButton
        url={`https://onlineprimarysources.cercec.fr/sources/${data.id}`}
      >
        <VKIcon size={40} round />
      </VKShareButton>
    </div>
  )
}

道具数据来自获取外部 api（在页面组件中使用 getStaticProps）。

在 facebook 上分享页面看起来像这样：

在 Twitter 上分享的同一页面：