我已經在這個問題上停留了一段時間了。我在普通的 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)}同樣,“導航欄品牌”鏈接有效,但導航欄項目無效。我的想法是它與它的呈現方式有關,但我無法弄清楚這是如何發生的以及為什么會發生。另一個有趣的部分是,如果我在我的瀏覽器中禁用 JAVASCRIPT,鏈接就可以工作如果有人知道為什么會這樣。請告訴我。謝謝//古斯塔夫
GatsbyJS + React 中的錨鏈接
繁星淼淼
2023-04-27 16:53:55