Javascript GatsbyJS+中的锚链；反应

我已经在这个问题上纠缠了一段时间了。我在一个普通的createreact应用程序中创建了一个GatsbyJS项目。在我对代码做了一些重大修改之前，一切都很顺利。这毁了我的导航-但不是完全！徽标导航仍然有效，页脚中的链接仍然有效，但导航栏项目无效。我正在使用盖茨比插件：“盖茨比插件锚链接”（）

以下是我的NavBarItem代码（组件）：

从“React”导入React
导入“../../Bulma.css”
从“盖茨比”导入{Link}
功能导航栏（道具）{
返回(
{props.text}
)
}
导出默认NavBarItem

这是我的导航栏组件：

从“React”导入React
从“/assets/NavBarItem”导入NavBarItem
导入“./Bulma.css”
导入“/NavBar.css”
从“盖茨比”导入{Link}
从“../../static/dronarfoton_logo.png”导入徽标
类NavBar扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
是的，
}
}
切换（）{
this.setState（{isActive:！this.state.isActive}）
}
render（）{
返回(
)
}
}
导出默认导航栏

同样，“导航栏品牌”链接有效，但导航栏项目无效

我的想法是，这与它的渲染方式有关，但我不知道这是如何发生的&为什么发生的

另一个有趣的部分是，如果我在浏览器中禁用JAVASCRIPT，链接可以工作

如果有人知道为什么会这样。请让我知道

---

谢谢//Gustav

您在

组件中使用了

道具
位置
，但最终，您呈现了一个
，它既不接受散列（
），也不接受锚行为。如您所见：

无论是
还是
导航
都不能用于带有
散列或查询参数。如果你需要这种行为，你应该
使用锚定标签或导入Gatsby提供的
@reach/router
包
已依赖于利用其导航功能

如果您想在
中使用锚定链接，您应该使用常规
或正确使用
盖茨比插件锚定链接
：

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



请记住，使用常规的
，您将失去
@reach/routing
上的所有好处，您将完全刷新页面。
您在
组件中使用了
道具
位置
，但最终，您将呈现一个不接受散列（
）两者都不是锚行为。如您所见：

无论是
还是
导航
都不能用于带有
散列或查询参数。如果你需要这种行为，你应该
使用锚定标签或导入Gatsby提供的
@reach/router
包
已依赖于利用其导航功能

如果您想在
中使用锚定链接，您应该使用常规
或正确使用
盖茨比插件锚定链接
：

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



请记住，使用常规的
，您将失去
@reach/routing
上的所有好处，您将完全刷新页面。
您是否有任何live site/CodeSandbox来检查这些链接？您是否有任何live site/CodeSandbox来检查这些链接？这是值得的，文档没有很好地解释
链接
和
导航
的缺点。两者都可以用于链接到URL中有片段的页面，但它们不包括将浏览器滚动到由锚标识的页面上的元素的任何行为。这是你的责任，通过从
gatsby browser.js
导出带有所需行为的
shouldUpdateScroll
函数可以很容易地完成。值得一提的是，该文档在解释
链接
和
导航
的缺点方面做得很差。两者都可以用于链接到URL中有片段的页面，但它们不包括将浏览器滚动到由锚标识的页面上的元素的任何行为。这是您的责任，您可以通过从
gatsby browser.js
导出带有所需行为的
shouldUpdateScroll
函数轻松完成。