Link component does not work as expected

[sapinder-singh]

Description

Since the first day I started my project in Gatsby, I haven't been able to fix this weird issue where the active link styles don't work as intended; be it using activeClassName, activeStyle or getProps prop.

I've tried all the methods. The current active link is supposed to have an aria-current="page" attribute and active class attached to it.
But as I see, both of these things are not present on Bookmarks & About Me links when their associated routes are visited directly by the client; as opposed to navigating internally from Home route.
You can check it yourself by visiting e.g. /bookmarks route directly
https://blog-sapinder-dev-staging.herokuapp.com/bookmarks
Everything is fine with Home route whether navigating internally or externally.

Steps to reproduce

1. Visit the Home route.
2. As visible, the Home link is applied the necessary styles.
3. Navigate to any of the other routes. As expected, the aria-current="page" and active class is shifted to the associated link element on the current route.
4. Now Refresh the page (landing on non-Home routes directly); and you see that there's no aria-current="page" and active class present on the associated link. And hence, no styles applied to it.

Expected result

When landing on non-Home routes directly, aria-current="page" and active class should be attached to the associated link.

Actual result

This works only when navigating internally from some other route, after the first render of the site.

Relevant Component

import { Link } from 'gatsby';
import React, { ReactNode } from 'react';
import styled, { css } from 'styled-components';
// externals
import TextHoverBars from '../TextHoverBars';
import { Navbar } from '../Header/Header.styles';

type PropsType = {
  to: string;
  highlightable?: boolean;
  children: ReactNode;
};

export default function InternalLink({
  to,
  highlightable = false,
  children,
}: PropsType) {
  return (
    <StyledLink
      to={to}
      highlightable={highlightable ? 'true' : 'false'}
      activeClassName="active">
      {highlightable ? <TextHoverBars>{children}</TextHoverBars> : children}
    </StyledLink>
  );
}

const StyledLink = styled(Link)<{ highlightable: 'true' | 'false' }>`
  ${props =>
    props.highlightable === 'true' &&
    css`
      color: var(--color-primary);
      font-weight: var(--fw-bold);

      ${Navbar} &:not(.active) {
        color: var(--color-regularText);
        font-weight: var(--fw-regular);
      }
    `}
`;

Browsers

1. Chrome- 91.0.4472 .114
2. Firefox- 89.0.2

Packages

1. gatsby- 3.8.0
2. styled-components- 5.3.0
3. gatsby-plugin-styled-components- 4.8.0
4. babel-plugin-styled-components- 1.12.0

[LekoArts]

Hi!

I think this has to do with your usage of styled-components. If you visit https://minimal-blog.lekoarts.de/blog (which uses Theme UI, a CSS-in-JS solution on top of emotion) you'll see the "Blog" in the navigation highlighted. The code is here: https://github.com/LekoArts/gatsby-themes/blob/master/themes/gatsby-theme-minimal-blog/src/components/navigation.tsx

I had to create the AsLink component as Theme UI didn't pass the information correctly.

For your case I'd suggest to try using the as prop from styled-components: https://styled-components.com/docs/api#as-polymorphic-prop

[sapinder-singh]

The issue remains even if I use raw Link component like this-

<Link
      to={to}
      activeStyle={{ color: 'var(--color-primary)', fontWeight: 'bold' }}>
      {children}
    </Link>

So it's not an issue with styled-components. In fact, now I get this thing in the console-

[LekoArts]

Are you using DEV_SSR flag and try this in gatsby develop? Put this in your gatsby-config.js:

module.exports = {
  flags: {
    DEV_SSR: false
  },
  // The rest of your config
}

And try it again. Also try running gatsby build and then gatsby serve.

Check if your path has a trailing slash or not, e.g. /page-2 vs /page-2/.
Also see: #10586

If you have to="/bookmarks" but your server responds with /bookmarks/ then it won't match exactly.

[sapinder-singh]

Oh gosh! So trailing slashes was the culprit that I was never aware of. Thanks for your time bro!

[LekoArts]

Sure, no problem! If you want more finegrained control check out this: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/#use-getprops-for-advanced-link-styling

[alienriquebm]

Hi!

I think this has to do with your usage of styled-components. If you visit https://minimal-blog.lekoarts.de/blog (which uses Theme UI, a CSS-in-JS solution on top of emotion) you'll see the "Blog" in the navigation highlighted. The code is here: https://github.com/LekoArts/gatsby-themes/blob/master/themes/gatsby-theme-minimal-blog/src/components/navigation.tsx

I had to create the AsLink component as Theme UI didn't pass the information correctly.

For your case I'd suggest to try using the as prop from styled-components: https://styled-components.com/docs/api#as-polymorphic-prop

This saved my life today, thanks!