GatsbyJS + React 中的錨鏈接

Question

我已經在這個問題上停留了一段時間了。 我在普通的 create-react-app 中創建項目后創建了一個 GatsbyJS 項目。 一切正常，直到我對代碼進行了一些重大更改。 這毀了我的導航 - 但不完全，徽標導航仍然有效，頁腳中的鏈接。 但不是 NavBar 項目：我正在使用 gatsby 插件：'gatsby-plugin-anchor-links' ( https://www.gatsbyjs.com/plugins/gatsby-plugin-anchor-links/ )。

這是我的 NavBarItem 代碼（組件）：

import React from "react"
import "../../Bulma.css"
import { Link } from "gatsby"

function NavBarItem(props) {
  return (
    <Link
      className={"pl-6 pr-6 has-text-black navbar-item " + props.class}
      to={"/#" + props.location}
    >
      {props.text}
    </Link>
  )
}

export default NavBarItem

這是我的 NavBar 組件：

import React from "react"
import NavBarItem from "./assets/NavBarItem"
import "../Bulma.css"
import "./NavBar.css"
import { Link } from "gatsby"
import logo from "../../static/dronarfoton_logo.png"

class NavBar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isActive: true,
    }
  }

  toggle() {
    this.setState({ isActive: !this.state.isActive })
  }

  render() {
    return (
      <nav
        className="navbar has-text-white has-background-grey-lighter has-navbar-fixed-top is-fixed-top"
        role="navigation"
        aria-label="main navigation"
      >
        <div className="navbar-brand">
          <a href="#Top" className="navbar-item">
            <img
              alt="Logga som det står DrönarFoton på. Det visar en drönare och text."
              src={logo}
              width="112"
              height="28"
            />
          </a>

          <a
            role="button"
            className={
              this.state.isActive
                ? "navbar-burger burger"
                : "is-active navbar-burger burger"
            }
            aria-label="menu"
            aria-expanded={this.state.isActive ? "false" : "true"}
            data-target="navbarBasicExample"
            onClick={this.toggle.bind(this)}
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
        <div
          className={this.state.isActive ? "is-active navbar-menu" : "is-block"}
        >
          <div className="navbar-end">
            <NavBarItem location="Top" text="Hem" />
            <NavBarItem location="OmOss" text="Om oss" />
            <NavBarItem location="Kontakt" text="Kontakt" />
            <NavBarItem class="is-disabled" location="#" text="❌ Galleri ❌" />
          </div>
        </div>
      </nav>
    )
  }
}

export default NavBar

同樣，“導航欄品牌”鏈接有效，但導航欄項目無效。

我的想法是它與它的呈現方式有關，但我無法弄清楚這是如何發生的以及為什么會發生。

另一個有趣的部分是，如果我在我的瀏覽器中禁用 JAVASCRIPT ，鏈接就可以工作

如果有人知道為什么會這樣。 請告訴我。

謝謝//古斯塔夫

Answer 1

您在<NavBarItem>組件中使用了一個prop location ，但最后，您渲染了一個<Link> ，它不接受哈希 ( # ) 也不是錨點行為。 正如您在<Link>的 API 文檔（應用內導航）中所見：

<Link>和navigate都不能用於帶有 hash 或查詢參數的路線導航。 如果您需要這種行為，您應該使用錨標記或導入@reach/router包（Gatsby 已經依賴該包）以使用其導航 function。

如果您想在<NavBarItem>中使用錨鏈接，您應該使用常規<a>或正確使用gatsby-plugin-anchor-links ：

  <AnchorLink
    to="/about#team"
    title="Check out our team!"
    className="stripped"
    stripHash
  />

請記住，使用常規<a> ，您將失去@reach/routing的所有好處，並且您將完全刷新頁面。