Reactjs 选择锚定链接React和Gatsby后关闭菜单

我有一个汉堡包导航，它使用盖茨比的链接，在整个网站上导航。它按预期工作，但如果我与正在单击的锚元素位于同一页面上，则菜单不会关闭。如果我关闭它，我可以看到它导航到它需要的地方

当我添加onClick函数时，它会覆盖导航，因此菜单会关闭，但不会在任何地方导航。如何解决这个问题

import React, { useState } from "react"
import { string } from "prop-types"

import { Link } from "gatsby"

import styles from "./styles.module.less"

const Navbar = ({ siteTitle, navColor }) => {
  const [isHidden, showNavigation] = useState(true)

  const links = (
    <div className={styles.links}>
      <Link to="/about">About</Link>
      <Link to="/people">People</Link>
      <Link to="/#work">Work</Link>
      <Link to="/careers">Careers</Link>
      <Link to="/contact-us">Contact</Link>
    </div>
  )

  const handleMenuToggle = e => {
    e.preventDefault()
    showNavigation(!isHidden)
  }
  let nvColor = navColor ? navColor : "translate"
  let logo = navColor ? blackLogo : whiteLogo
  return (
    <>
      <header data-component="Navbar" className={styles.Navbar}>
        <Link to="/" className={styles.logo} title={siteTitle}>
          <img src={logo} alt={siteTitle} />
        </Link>
        <a
          className={styles.menu}
          href="#main-nav"
          title="View menu"
          onClick={handleMenuToggle}
          style={{ color: nvColor }}
        >
          …
        </a>
      </header>
      <div>
        <nav id="main-nav" className={styles.MainNav} hidden={isHidden}>
          <div className={styles.blocks}>
            <div className={styles.LeftNav}>
              <a
                onClick={handleMenuToggle}
                title="Hide menu"
                href="#"
                className={styles.close}
              >
                <img src={close} alt="Hide menu" />
              </a>

              {links}
            </div>




          </div>
        </nav>
      </div>
    </>
  )
}

Navbar.propTypes = {
  siteTitle: string,
}

export default Navbar

import React，{useState}来自“React”
从“属性类型”导入{string}
从“盖茨比”导入{Link}
从“/styles.module.less”导入样式
常量Navbar=（{siteTitle，navColor}）=>{
常量[isHidden，showNavigation]=useState（true）
常量链接=(
关于
人
工作
事业
接触
)
常量handleMenuToggle=e=>{
e、 预防默认值（）
showNavigation（！isHidden）
}
让nvColor=navColor？navColor:“翻译”
let logo=navColor？黑色徽标：白色徽标
返回(
{links}
)
}
Navbar.propTypes={
siteTitle:string，
}
导出默认导航栏

您只需停止阻止默认行为

const handleMenuToggle = e => {
  e.preventDefault() // Remove this line
  showNavigation(!isHidden)
}

---

应该可以从

handleMenuToggle

中删除

e.preventDefault（）

，哦，上帝，谢谢你！我将正式回答：）