Netlify Redirect or Rewrite for Gatsby Wildcard Path


So I’ve already implemented a wildcard path on my gatsby-node.js file:

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  if (page.path.match(/^/my-path/)) {
    page.matchPath = "/my-path/*"
    createPage(page)
  }
}

and this works fine when I am running the site locally (in development). i.e., if i provide /my-path/anything123 or /my-path/asdfasdfasdf, both will lead to a rendering of the component I’ve created in my Gatsby project under pages/my-path.tsx.

Now we come to my problem. When I deploy my site to Netlify, I don’t get the same behavior as in development. Can behavior like this be handled with a redirect or rewrite in Netlify? I don’t want to lose the content in what comes after /my-path/, as in reality I’m using it to parse an id, i.e. if the URL in the browser is /my-path/123, I want to be able to see that 123 in window.location.href, and parse it with some logic in my-path.tsx.

I hope this is clear. Appreciate anyone who can help or guide me in the right direction!

Source: React – Stack Overflow

November 25, 2021
Category : News
Tags: gatsby | netlify | reactjs | redirect | url-rewriting

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.