How to style the currently active link in Gatsby

In Gatsby, you using the <Link> component to create links to other pages on your Gatsby site.

It's fairly common to highlight the currently active page in a site navigation bar, to show a visitor where in the navigation they are. Gatsby's <Link> component provides a built-in way to style a link that points to the current page.

Add CSS to the currently active class

<Link
  to="/about/"
  activeStyle={{
    color: "blue",
    fontWeight: 700
  }}
>
  About
</Link>

Add a CSS class to the currently active link

<Link
  to="/about/"
  activeClassName="active"
>
  About
</Link>