Understanding the behaviour of activeClassName in <Link> with multiple pages.

[PsyGik]

I am not sure if this is an issue or expected behaviour, hence creating under discussion to avoid polluting the issues section.

Application Structure:

I have a nav bar with 3 Links.

• / = Home Page
• /about/ = About Page
• /contact/ = Contact Page

The main layout is pretty straightforward:

import { Link } from "gatsby";
import React from "react";
import "./Layout.css";

export const Layout = ({ children }) => {
  return (
    <div className="page-container">
      <nav className="nav">
        <Link className="link" activeClassName="active" to="/">
          Home
        </Link>
        <Link className="link" activeClassName="active" to="/about/">
          About
        </Link>
        <Link className="link" activeClassName="active" to="/contact/">
          Contact
        </Link>
      </nav>
      <main className="main">{children}</main>
      <footer className="footer">A Simple Gatsby Site</footer>
    </div>
  );
};

Since this is a Layout, I use it in wrapRootElement in gatsby-browser.js and gatsby-ssr.js.

import React from "react";
import { Layout } from "./src/components/Layout";

// Wraps every page in a component
export const wrapRootElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>;
};

The page looks like this:

Problem:

Initial page load is fine. activeClassName adds the class to Home as expected. The problem however, occurs on a page reload. Here's a video which demonstrates that:

Screen.Recording.2021-05-23.at.10.48.51.AM.mov

Steps to replicate:

NOTE: You might want to have DEV_SSR flag enabled. Since this issue can only be replicated on final build and not on dev.

• Clone the repo: https://github.com/PsyGik/gatsby-link-test
• npm install && npm run build && npm run serve
• Navigate to browser
• Goto to either /about/ or /contact/
• Reload the page
• Home is highlighted, even though the page is on /about/ or /contact/
• If I am on /about/, clicking on /about/ has no effect.
• In order to have the activeClassName working as before, I need to navigate to / and then it works like before.

Questions:

• Is this the intended behaviour of activeClassName?
• partiallyActive is not being used here. So why is the / still getting active styles even though it isn't the active page?
• If I have to use getProps to fix this behaviour, then isn't this a bug with Link component?

[PsyGik]

Another quick observation, when I run npm run build, and check the index.html files generated against each page, the a tag for Home (/) has the active class included.

// public/about/index.html
<nav class="nav">
          <a aria-current="page" class="link active" href="/">Home</a>
          <a class="link" href="/about/">About</a>
          <a class="link" href="/contact/">Contact</a>
        </nav>

To replicate, run npm build (repo linked above), and check in public > about > index.html.

Now I'm inclined to think this is a bug?

[PsyGik]

I can't believe that the fix was as simple as:

// Wraps every page in a component
- export const wrapRootElement = ({ element, props }) => {
+ export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>;
};

Another symptom of skimming the docs, instead of actually reading it. I am so dumb 🤦🏽 https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapPageElement