Question

我对Gatsby / React和Web开发一般都很陌生，所以这可能是一个非常简单的解决方案，但我无法弄清问题是什么。

我目前正在处理我的标题并链接到我网站上的每个页面，并且正在使用＆＃34; activeStyle＆＃34;属性。所以在此之前描述具体细节是我想要做的简化版本：

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

当我将此链接放在除家庭以外的页面上时，即使它实际上不是活动页面，它仍会突出显示链接黄金。但是，如果我使用相同的确切代码，而是链接到/ about页面，它将正常工作，如果我在about页面上链接将只是金。我错过了什么吗？

我试图将链接设置为=＆＃34; / index＆＃34;，但Gatsby错误地说我＆＃34; / index＆＃34;不存在并给出了我网站上的页面列表，其中一个是＆＃34; /＆＃34;。老实说，我不能想到这个是怎么回事。

谢谢！

Answer 1

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

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

react-router v4 doc可能对您有用

＆＃34; activeStyle＆＃34;属性始终应用于pages \ index.js

1 个答案: