Gatsby: Link's activeClassName not applied when linking to headers

[chasemccoy]

Description

I use the activeClassName prop on the Link component to style the sidebar on my site and highlight the page the user is currently using.

If I visit a link that ends in a hash (such as /page#heading-within-page), the activeClassName is not applied to the link. I would expect for it to be applied because the user is still on the same page and the link is still "active".

Environment

  System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.9.0 - ~/.nvm/versions/node/v8.9.0/bin/node
    Yarn: 1.9.4 - ~/.yarn/bin/yarn
    npm: 6.1.0 - ~/.nvm/versions/node/v8.9.0/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Firefox: 61.0.2
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.0-rc.3 => 2.0.0-rc.3 
    gatsby-plugin-catch-links: ^2.0.2-beta.10 => 2.0.2-beta.10 
    gatsby-plugin-favicon: ^3.1.2 => 3.1.2 
    gatsby-plugin-google-analytics: next => 2.0.0-beta.5 
    gatsby-plugin-react-helmet: next => 3.0.0-beta.4 
    gatsby-plugin-sass: next => 2.0.0-beta.10 
    gatsby-plugin-sharp: ^1.6.48 => 1.6.48 
    gatsby-plugin-styled-components: next => 3.0.0-beta.3 
    gatsby-plugin-typography: next => 2.2.0-beta.3 
    gatsby-remark-autolink-headers: ^1.4.18 => 1.4.19 
    gatsby-remark-component: ^1.1.3 => 1.1.3 
    gatsby-remark-copy-linked-files: next => 2.0.0-beta.3 
    gatsby-remark-external-links: ^0.0.4 => 0.0.4 
    gatsby-remark-images: ^1.5.67 => 1.5.67 
    gatsby-remark-smartypants: next => 2.0.0-beta.3 
    gatsby-source-filesystem: next => 2.0.1-beta.10 
    gatsby-transformer-remark: next => 2.1.1-beta.6 
  npmGlobalPackages:
    gatsby-cli: 2.0.0-beta.13

[chasemccoy]

@m-allanson the fix that went out earlier for the double slash problem (#7577) fixed one of my issues, but this still remains

[chasemccoy]

Btw, this is happening both in dev and prod

[chasemccoy]

I was able to work around this by using the Reach Router Link getProps property:

const isActive = ({ isPartiallyCurrent }) => {
  return isPartiallyCurrent ? {className: 'active'} : null
}

But I wonder if maybe we should make isPartiallyCurrent the default for Gatsby's Link component? I feel like most folks would expect hashed links to still be active for that page.

[imshuffling]

I think I'm having a similar issue on nested Links.

...
        <Link className="logo" to="/"><img src={logo} alt="Logo" /></Link>
          <ul id="mainnav">
            {data.map((item, i) =>
              <li key={i} className={item.childPages ? 'has-child-wrap' : null}>
                <Link activeClassName="active top hello" className={item.childPages ? 'has-child' : null} to={'/' + item.slug}>{item.menuTitle}</Link>
                {item.childPages !== null &&
                  <Nav nav={item.childPages} />
                }
              </li>
            )}
          </ul>
      </Menu>
    )
  }
}

const Nav = ({ nav }) => {
    return (
      <ul className="children">
        {nav.map((node) => (
          <li key={node.id}>
            <Link exact activeClassName="active child" to={'/' + node.slug}>{node.menuTitle}</Link>
          </li>
        ))}
      </ul>
    )
}

activeClassName="active top hello" is not being applied anymore since upgrading to the latest v2.

is activeClassName not supporting in reach router?

[imshuffling]

Manage to solved this in the end.

...
const isPartiallyActive = ({
  isPartiallyCurrent
}) => {
  return isPartiallyCurrent
    ? { className: "has-child active top" }
    : null
}
...

...
          <ul id="mainnav">
            {data.map((item, i) =>
              <li key={i} className={item.childPages ? 'has-child-wrap' : null}>
                <Link getProps={isPartiallyActive} className={item.childPages ? 'has-child' : null} to={'/' + item.slug}>{item.menuTitle}</Link>
                {item.childPages !== null &&
                  <Nav nav={item.childPages} />
                }
              </li>
            )}
          </ul>
...

[kakadiadarpan]

Hi, @chasemccoy @imshuffling would it be possible for you to provide a repository we can reproduce this?

[stefanprobst]

Would this be resolved by explicitly mentioning reach-router Link's getProps in the gatsby-link docs and showing how to use it?

[intelligence]

Seeing this issue aswell. While browsing the site, activeClassName will get applied. But loading any page (besides index) directly and it will append "/" to the slug and activeClassName won't get applied.

[sylvhama]

@intelligence are you using gatsby-plugin-offline? I've noticed that removing it would not reproduce the issue in my project.

[sylvhama]

Sorry my previous comment was incomplete. When combining Link's avtiveStyle or activeClassName with gatsby-plugin-offline and with wrapPageElement from gatsby-browser / gatsby-ssr then the active style won't be shown when refreshing the page. I guess it's related to the fact the Service Worker will cache the nav bar when all links are inactive.

Demo: https://gatsby-link-active-test.netlify.com/
Repo: https://github.com/sylvhama/gatsby-link-active-test

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[MikSDigital]

Hello @sylvhama !
Did you manage applying active class to direct visiting page?
https://gatsby-link-active-test.netlify.com/page-2/

[sylvhama]

@MikSDigital My dirty fix: https://github.com/sylvhama/shamann-gatsby/blob/master/src/components/Layout.js#L72

[MikSDigital]

@sylvhama , thanks for quick reply!

I have used
partiallyActive={true}

    <Link to="/contact"
    partiallyActive={true}
    className={HeaderStyles.navItem}
    activeStyle={activeStyles}>
    Contact
    </Link>

And now all active links are "active" even if visited directly