Gridsome Client Side Routing - Route changes break after initial page load

Hey all,

Here are some details about my project.

How to replicate the issue?
Go to the website and then click on any of the navigation links. This will result in a ‘page’ change. However, if you try to click any other navigation links you will not see any router changes.

Also, take note of the console errors that arise when clicking on the navigation links.

What I have tried

Based on other questions within the forum I have attempted to add a ./src/static/_redirects file with the following line of code:
/* / 200
&&
/* /index.html 200

After reading through the docs
I attempted to solve the issue with the following ./netlify.toml

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  force = false

What is the proper way to work with Gridsome client-side routing on Netlify?

Are the redirect paths relative to the dist directory (aka the build directory)?

Thank you for your time,

UPDATE:

Okay so if you head over to Gridsome’s docs you will see the following:

You do not need to set up any redirect rules for a Gridsome site to work with Netlify. Gridsome generates HTML files for every path on your site so rewrite rules aren’t necessary (except for dynamic pages).

However, I understand that since Gridsome is a SPA, and leverages client-side routing the following redirect rule makes sense.

So I have tried both avenues (using the suggested redirects file, and deploying with no redirects file), with no success.

Would love some perspectives/potential solutions to this issue. Thank you for your time.

Hi, @swordofvim. The file _redirects needs to be found in the publish directory at the end of the deploy. The netlify.toml file is read from the build directory.

If you are testing these redirects with a site at Netlify, we can troubleshoot the redirect if you let us know which site you are testing and what URL is being tested. The site in the example above doesn’t exist so I cannot confirm if the redirect rules were read and processed or not. If there are other questions, please let us know what URL is being tested.

Hey Luke,

Thanks for the thoughtful reply!

I figured it out. Due to the way Vue handles hydrating the DOM in production I was missing some pretty minor HTML errors. Please read through this guide for a summary of Vue hydration.
Client Side Hydration | Vue SSR Guide (vuejs.org)

[SOLUTION]
My solution was to get up and running with ESlint, and found that using the --fix argument made resolving this issue a breeze.

Warmth and Sunshine,
~ Ben

Hi, @swordofvim. Thanks for taking the time to share the solution you found. :+1: