Link activeClassName does not work, even with trailing slashes correct

[doc-l]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Hello!

I'm having the same issue as described in #32140, including the aria-current mismatch. However, in my case, this is not related to trailing slashes. In my gatsby-node file. I have verified that the server url is the same as the to field in the Link component by logging the routerElement in ssr-develop-static-entry.js which gives in my case /nl/fotoproducten/:

{
  '$$typeof': Symbol(react.element),
  type: [Function: J],
  key: null,
  ref: null,
  props: { url: '/nl/fotoproducten/', children: [ [Object], [Object] ] },
  _owner: null,
  _store: {}
}

The to field of my link component is:

<Link 
  to={'/nl/fotoproducten/'}
  activeClassName={style.active}
>

Both are identical. Also in gatsby-node, I have this in the createPage:

    createPage(actions, {
        path: url,
        component,
        context: {
            ...context,
            alternate_languages,
            category,
            id,
            url,
        },
    });

So the path is url which is also in the context, and I then verified if this url in the context is the same as in the gatsby link, which it is. Actually, when I put the url from the context into the to field, it still doesn't apply the active class on page load.

When I reload the page the active style is not applied, when I then client side route somewhere and back to this page the active style is correctly applied.

Also, we're not using the offline plugin (which was mentioned in that issue).

I'm not sure how I can further debug why the active style class is not applied. Can I add some other logs? I tried to log the htmlStr where it rendered all the a elements but not with the aria-current attribute.

Reproduction Link

Steps to Reproduce

see above

Expected Result

the active class should be applied on page load during SSR

Actual Result

it is not

Environment

System:
    OS: macOS 12.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.16.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.npm-packages/bin/npm
  Browsers:
    Chrome: 115.0.5790.114
    Edge: 115.0.1901.188
    Firefox: 105.0.3
    Safari: 15.4
  npmPackages:
    gatsby: ^5.3.3 => 5.3.3 
    gatsby-cypress: ^2 => 2.25.0 
    gatsby-plugin-google-tagmanager: ^5.3.1 => 5.3.1 
    gatsby-plugin-i18n: ^1.0.1 => 1.0.1 
    gatsby-plugin-image: ^3.3.2 => 3.3.2 
    gatsby-plugin-prismic-previews: ^5.2.10 => 5.2.10 
    gatsby-plugin-react-helmet: ^6.3.0 => 6.3.0 
    gatsby-plugin-react-svg: ^3.3.0 => 3.3.0 
    gatsby-plugin-remove-generator: ^1.3.0 => 1.3.0 
    gatsby-plugin-rudderstack: ^2.0.0 => 2.0.0 
    gatsby-plugin-sass: ^6.3.1 => 6.3.1 
    gatsby-plugin-static-folders: ^1.0.1 => 1.0.1 
    gatsby-source-graphql: ^5.3.1 => 5.3.1 
  npmGlobalPackages:
    gatsby: 5.9.0

Config Flags

DEV_SSR: true