如何将无头 wordpress href 转换为 <Link>

Question

不确定这是否可行，但我正在将 Next.js 与 WordPress API 又名无头 wordpress 一起使用。我正在输出一个由文本和链接组成的古腾堡区域。链接的问题在于它们不是通过 Next.js 方式完成的，当您单击一个链接时，您可以在控制台中看到它正在重新加载整个页面，而不是在不刷新的情况下进行链接。

所以，如果我在 Next.js 中设置链接，我会这样做

  <Link href="/posts/first-post">
    <a>this page!</a>
  </Link>

但是因为我正在这样做

      <div
        className="content"
        dangerouslySetInnerHTML={{
          __html: DOMPurify.sanitize(homeData.kidsSectionContent),
        }}
      />

我得到了 WordPress 给我的任何东西<a href="some-page">click me<a/>

Answer 1

我认为它不像你想要的那样工作。因为<Link其实是JSX代码，就是转换成javascript的类似html的代码。

实际上<Link ...> 语法被编译成类似：

const Link = require("path/to/Link.js");
React.createElement(Link, {props});

您正在从 api 获取原始 html 数据，并且您希望将这些数据转换为已编译的 javascript。所以它可以连接到 React 中。据我了解，这可能是可能的，但不是很有用。因为一个简单的破坏 html 结果，会破坏你的页面。

我认为您需要问自己为什么要使用单页行为。

但是，我认为如果你可以用响应式语法替换你的 html，然后用 JSX 解析它，你可能会得到你想要的。但它可能会很慢，并且可能会破坏页面。