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

如何解决使用react-share和next.js出现404错误

我已经用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（在Page组件中带有getStaticProps）。

在Facebook上共享页面看起来像这样：

Screenshot of facebook 404 error

在Twitter上共享同一页面：

Screenshot of twitter