Gatsby client routes go to 404 in develoment environment

Question

I am working on a gatsby hybrid app that has several client-only routes with dynamic server data. Strangely when navigating to one of the client-only routes at I am getting the 404 page and the message that there is no page found.

Visiting the client-only URL directly, eg. mysite/auth/login works, and the issue only happens when using an internal Link component or navigate('/auth/login').

I am using the gatsby-plugin-create-client-paths setup

and Router component to handle the client-routing

I am have tried different approaches but couldn't figure out why I am being redirected to the 404 page. The issue happens only on the inial page visit. Once the page has been loaded internal navigation works without errors and also only happens in development mode. The production build works just fine.

Any ideas what could cause this behavior??

Answer 1

I guess you are using reach router navigate. If thats the case, try and use navigate from gatsby.

import { navigate } from 'gatsby'

Answer 2

Similar issue exists in the "simple-auth" example in Gatsby git repository. After initial startup by running yarn develop at background, the click on 'log in' will go to Gatsby development 404 page.

The reason behind this is this example, and quite a lot demo around blog spots use the "Link" from @reach/react, which normally doesn't handle SSG or static routing thing, but "Link" from gatsby knows very well how to handle these.

So, the fix is:

to replace // import { Link } from "@reach/router" with import { Link } from "gatsby".