client-only router always goes to 404

[seyoongit]

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

client-only router always goes to 404 page.

any Link component from gatsby or @reach/router are not works

my code is below:

// src/pages/wow.js

import React from 'react';
import { navigate, Link as GatsbyLink } from "gatsby"
import { Router, Link as ReachRouterLink } from "@reach/router"


const Default = () => {
    return <h1>Default</h1>
}
const Apple = () => {
    return <h1>Apple 🍎</h1>
}
const WowPage = () => {
    return (
        <div>
            <ReachRouterLink to="/wow/apple">Reach Router Link</ReachRouterLink>
            <br/>
            <GatsbyLink to="/wow/apple">Gatsby Link</GatsbyLink>
            <br/>
            <button onClick={() => navigate('/wow/apple')}>Gatsby Navigate</button>
            <br/>

            <Router basepath="/wow"> 
                <Apple path="/apple" />
                <Default path="/" />
            </Router>

        </div>
    )
}

export default WowPage

it always returns page like this

Reproduction Link

Steps to Reproduce

Expected Result

Actual Result

Environment

System:
    OS: macOS 12.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 19.3.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 9.2.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  Browsers:
    Chrome: 111.0.5563.64
    Edge: 111.0.1661.41
    Firefox: 102.0
    Safari: 15.2
  npmPackages:
    gatsby: ^5.5.0 => 5.5.0
    gatsby-plugin-emotion: ^8.3.0 => 8.3.0
    gatsby-plugin-image: ^3.5.0 => 3.5.0
    gatsby-plugin-manifest: ^5.3.1 => 5.3.1
    gatsby-plugin-react-helmet: ^6.5.0 => 6.5.0
    gatsby-plugin-react-svg: ^3.3.0 => 3.3.0
    gatsby-plugin-robots-txt: ^1.8.0 => 1.8.0
    gatsby-plugin-s3: ^0.3.8 => 0.3.8
    gatsby-plugin-sharp: ^5.5.0 => 5.5.0
    gatsby-plugin-sitemap: ^6.5.0 => 6.5.0
    gatsby-source-filesystem: ^5.5.0 => 5.5.0
    gatsby-transformer-sharp: ^5.5.0 => 5.5.0
  npmGlobalPackages:
    gatsby-cli: 5.3.1

Config Flags

[presto2116]

Running into this same issue when updating to gatsby v4 => v5

[ramakay]

This is a crucial issue from our perspective, any help is appreciated

[manishsundriyal]

Facing the same issue, has anyone found any workaround for this?

[presto2116]

Sadly no and there doesnt seem like any movement has been done. Its blocked us for over a year and we are still stuck on gatsby v4