第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

GatsbyJS + React 中的錨鏈接

GatsbyJS + React 中的錨鏈接

繁星淼淼 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è)面。


查看完整回答
反對(duì) 回復(fù) 2023-04-27
  • 1 回答
  • 0 關(guān)注
  • 121 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)