"activeStyle" 属性始终应用于指向 pages\index.js 的链接

Question

我对 Gatsby/React 和一般的 Web 开发还很陌生，所以这可能是一个非常简单的修复，但我不知道问题出在哪里。

我目前正在处理我的页眉并为我网站上的每个页面制作 links，但我在使用 "activeStyle" 属性时遇到了一些问题。因此，在描述细节之前，这里是我正在尝试做的事情的简化版本：

<Link to="/" activeStyle={{color: 'gold'}}>Home</Link>

当我将此 link 放在主页以外的页面上时，它仍会突出显示 link 金色，即使它实际上不是活动页面。但是，如果我使用完全相同的代码，而不是 link 到 /about 页面，它将正常工作，并且 link 只有在我在 about 页面上时才会是金色。我错过了什么吗？

我试图将 link 设置为 ="/index"，但是 Gatsby 通过一个错误告诉我“/index”不存在并给出了我网站上的页面列表，一个其中是“/”。老实说，我想不出这是怎么回事。

谢谢！

Answer 1

Link 没有 activeStyle 道具。你应该使用 NavLink 而不是 Link。它有以下道具：

<NavLink>
  activeClassName: string
  activeStyle: object // seems you are looking for this one
  exact: bool
  strict: bool
  isActive: func
  location: object

react-router v4 文档可能对您有用

"activeStyle" 属性始终应用于指向 pages\index.js 的链接

"activeStyle" attribute always applying on links to pages\index.js

html

reactjs

gatsby