CODEWITHSUNDEEP
htmlreactjsgatsby
Zach
Zach

Reputation: 891

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

I'm pretty new to Gatsby/React and web development in general, so this may be a very simple fix, but I can't figure out what the problem could be.

I'm currently working on my header and making links to each of the pages on my website and am having some trouble with the "activeStyle" attribute. So before describing specifics here is a simplified version of what I am trying to do:

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

When I place this link on a page other than home it will still highlight the link gold even though it isn't actually the active page. However, if I use the same exact code but instead link to the /about page, it will work correctly and the link will only be gold if I am on the about page. Am I missing something?

I attempted to set the link to="/index", but Gatsby through an error at me saying that "/index" does not exist and gave a list of the pages on my site, one of which was "/". I honestly can't think of what's going on with this.

Thanks!

Upvotes: 1

Views: 444

Answers (1)

The Reason
The Reason

Reputation: 7973

Link doesnt have activeStyle prop. Instead of using Link you should use NavLink. It has the following props:

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

react-router v4 doc might be useful for you

Upvotes: 1

Related Questions