繁星淼淼
2023-04-27 16:53:55
我已經(jīng)在這個(gè)問(wèn)題上停留了一段時(shí)間了。我在普通的 create-react-app 中創(chuàng)建項(xiàng)目后創(chuàng)建了一個(gè) GatsbyJS 項(xiàng)目。一切正常,直到我對(duì)代碼進(jìn)行了一些重大更改。這毀了我的導(dǎo)航 - 但不完全!徽標(biāo)導(dǎo)航和頁(yè)腳中的鏈接仍然有效,但 NavBar 項(xiàng)目無(wú)效。我正在使用 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)}同樣,“導(dǎo)航欄品牌”鏈接有效,但導(dǎo)航欄項(xiàng)目無(wú)效。我的想法是它與它的呈現(xiàn)方式有關(guān),但我無(wú)法弄清楚這是如何發(fā)生的以及為什么會(huì)發(fā)生。另一個(gè)有趣的部分是,如果我在我的瀏覽器中禁用 JAVASCRIPT,鏈接就可以工作如果有人知道為什么會(huì)這樣。請(qǐng)告訴我。謝謝//古斯塔夫
1 回答

人到中年有點(diǎn)甜
TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊
prop
?location
您在組件中使用 a<NavBarItem>
但最后,您呈現(xiàn)的是<Link>
, 它不接受散列 (?#
) 既不接受錨點(diǎn)行為。<Link>
正如您在的 API 文檔(應(yīng)用內(nèi)導(dǎo)航)中所見:
既不能
<Link>
也navigate
不能用于帶有散列或查詢參數(shù)的路線導(dǎo)航。如果您需要這種行為,您應(yīng)該使用錨標(biāo)記或?qū)?code>@reach/router包(Gatsby 已經(jīng)依賴該包)以使用其導(dǎo)航功能。
如果你想在你的 中使用錨鏈接<NavBarItem>
,你應(yīng)該使用常規(guī)<a>
或gatsby-plugin-anchor-links
正確使用:
?<AnchorLink ????to="/about#team" ????title="Check?out?our?team!" ????className="stripped" ????stripHash ??/>
請(qǐng)記住,使用常規(guī)<a>
,您將失去 上的所有好處,@reach/routing
并且您將完全刷新頁(yè)面。
添加回答
舉報(bào)
0/150
提交
取消