如何导航到 Gatsby (React) 中页面的不同部分？

Question

我想导航到我的 gatsby 网站中的不同部分。 我的index.js页面是这样的。

<section id="#">
    Hi Lorem ipsum dolor sit amet...
</section>
<section id="/#about">
    Hi Lorem ipsum dolor sit amet...
</section>
<section id="/#contact">
    Hi Lorem ipsum dolor sit amet...
</section>

我已经尝试过使用<a> tag 和Link 组件的两种方法。但两者都不起作用。

Navbar.js 代码

<a href="#about">ABOUT</a>
  or
<Link to="#about">ABOUT</Link>

我在 src/pages 中有 index.js，在 src/components 中有 Navbar.js 和 Layout.js。 这是我的Layout.js 代码。

import React from "react";
import Navbar from "./Navbar";

export default function Layout({ children }) {
    const navMargins = {
        marginBottom: "50px",
    };

    return (
        <div className="layout">
            <div className="navbar" style={navMargins}>
                <Navbar />
            </div>
            <div className="content">{children}</div>
        </div>
    );
}

Answer 1

您可以使用this plugin here： 我把安装、用法复制到这里

1. 安装

yarn add gatsby-plugin-anchor-links

1. 更新 gatsby-config.js

module.exports = {
  plugins: [`gatsby-plugin-anchor-links`]
};

有偏移

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-anchor-links",
      options: {
        offset: -100
      }
    }
  ]
}

1. 用法如下：

import { AnchorLink } from "gatsby-plugin-anchor-links";

export default () => (
  <AnchorLink to="/about#team" title="Our team">
    <span>Check out our team!</span>
  </AnchorLink>
);
// => <a href="/about#team" title="Our team"><span>Check out our team!</span></a>

export default () => (
  <AnchorLink to="/about#team" title="Check out our team!" />
);
// => <a href="/about#team" title="Check out our team!">Check out our team!</a>

export default () => (
  <AnchorLink
    to="/about#team"
    title="Check out our team!"
    className="stripped"
    stripHash
  />
);
// => <a href="/about" class="stripped" title="Check out our team!">Check out our team!</a>
// => Hash will be stripped, and a full page scroll will occure onRouteChange

export default () => <AnchorLink to="/about" title="About us" />;
// => <a href="/about" title="About us">About us</a>

如果你想避免使用这个插件，你可能想 您可以在 useEffect 或 componentDidMount 中调用它

window.addEventListener('locationchange', function() {
  if (window.location.hash) {
    window.scrollTo(0, document.getElementById(window.location.hash).offsetTop)
  }
})