Given a Gatsby application with dynamically generated product urls on build:
Is there a way to automatically cause access to non-existing sub-urls of each product to redirect to the root of that product? Preferably on the server-side (gatsby-ssr.js).
Like this:
Only found a client-side solution so far, which includes checking path in the 404 page template and doing a conditional window.location.assign. This is not very optimal as it flashes the 404 page before redirecting and does not perform a 302/301 redirect.
You can use createRedirect action in the gatsby-node.js:
exports.createPages = async ({ graphql, actions }) => {
const { createRedirect } = actions;
createRedirect({
fromPath: `/product/*/foo`,
toPath: `/product/*`,
});
}
Tweak it as you wish, you can use your current redirects rules within createRedirect.
Keep in mind that in createPages is where you create all dynamic pages hence you have all the slugs and paths available to make your dynamic redirects.
More details: https://support.gatsbyjs.com/hc/en-us/articles/1500003051241-Working-with-Redirects-and-Rewrites