Client Side Routing in Gatsby from Root
Gatsby client-side rendering documentation, Client-only Routes & User Authentication, shows how to implement a client-side routing.
What the issue?
Gatsby works as a SSR, and each route corresponds to a local file.
That means, whenever you use a client-side routing, Gatsby would look for a file (created under either src/pages/*
folder or dynamically created within gatsby-node.js
), and unfound file would result in 404.
To implement a client-side routing, you need to specify that a certain path is client-side only.
I will use how to configure it with a plugin, gatsby-plugin-create-client-paths_
gatsby-config.js
.
{
resolve: `gatsby-plugin-create-client-paths`,
options: { prefixes: [`/app/*`] },
},
prefix
specifies which sub-route needs to be treated as a client-side routing.
But when you specify /*
for the root, you get a 404 response.
Issue persists with manualy configuration in Client-only Routes & User Authentication article
What do you do then?
Nothing. Nada. Nope nothing.
You don't do anything.
Gatsby automatically creates /index.html
, so you can simply use @reach/router
(underlying router used by Gatsby; No need to install it) to do client-side routing.
You can check out the working sandbox below.
Image by James Wheeler from Pixabay
Webmentions
Loading counts...