javascript - Gatsby:单击路由中的 anchor 元素会导致重新渲染

Question

我设置了一个最小的 Gatsby 页面来测试 Gatsby 何时重新渲染，我发现只要点击一个常规的路由中(哈希) anchor 链接，就会导致重新渲染。

这是为什么呢？有什么办法可以预防吗？

这是一个示例页面:

const SomePage = props => {
  console.log('RE-RENDERING PAGE');
  return (
    <>
      <a href="#foo">Link that should not fire re-render</a>;
    </>
  );
};

Answer 1

import { Link } from "gatsby"

const SomePage = props => {
  return (
    <Link to="#foo">Link that should not fire re-render</Link>;
  );
};

<Link>将使用适当的 href 渲染一个完全可访问的 anchor 标签.