Path redirect/rewrite with several parts

Support
1

Hi everyone,

I’ve been struggling to understand rules applied by Netlify’s platform, although I read documentation carefully several times.

My use case is like following:

  • Gatsby website with the following structure
  • Page in /pages/initiatives.jsx which is going to serve a client-only route as described in Gatsby’s docs

The code in gatsby-node.js looks like following:

  if (page.path.match(/^\/initiatives/)) {
    /* eslint-disable no-param-reassign */
    page.matchPath = '/initiatives/*';

    return createPage({
      ...page,
      context: {
        ...page.context,
        layout: 'dynamic',
      },
    });
  }

At this point, when I run gatsby develop and when I open localhost:8000/initiatives/open-2019-000011 or localhost:8000/initiatives/open/2019/000011 I reach the contents of /pages/initiatives.jsx.

I would like to find a way to have the same behavior on Netlify.

What I’ve tried so far:

# The following redirect is intended for SPAs that handle routing internally.
[[redirects]]
  from = "/initiatives/*"
  to = "/initiatives/index.html"
  status = 200

I do confirm that /initiatives/index.html exists in the public folder, built by Gatsby and served by Netlify.

At this point, I do get to reach the contents of /pages/initiatives.jsx at https://foo-preview.netlify.com/initiatives/, but I can’t have //foo-preview.netlify.com/initiatives/foo. As soon as I open //foo-preview.netlify.com/initiatives/foo, I get to //foo-preview.netlify.com/initiatives/.

This is strange I think, because documentation says This means that in addition to redirects, you can define rewrite rules by specifying 200 as the status code. (reference)

Same behavior holds true with

[[redirects]]
  from = "/initiatives/*"
  to = "/initiative/:splat"
  status = 200 

[[redirects]]
  # initiatives/open/details/2019/000010
  from = "/initiatives/:status/:action/:year/:number"
  to = " /initiative/:year/:month/:date/:slug"

Having force = true, a single path element or even

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

I tried to use gatsby-plugin-create-client-paths but It’s not quite getting there in terms of redirects I think, as the automatically generated _redirects becomes

## Created with gatsby-plugin-netlify

/initiatives/*  /initiatives/  200

Any ideas what I’m doing wrong?

PS No links to documentation because my account is new and limited.

2

Hi,

Can you share a real URL? it doesn’t have to be a link but that way we can check a live site. I believe this is a gatsby config problem and not a Netlify issue. You stated that /foo-preview.netlify.com/initiatives/foo. opens /foo-preview.netlify.com/initiatives/. But the component that’s mounted is determined by the router Gatsby is using there and not by netlify. That said, I would need to see the actual live site to be able to confirm that your redirects are set up properly.

3

Hi @futuregerald it took me some time to create a separate project which will make it easier to reproduce the issue and I hope it will make the it easier to follow.

The repository is at: https://github.com/kalinchernev/gatsby-client-routes
The setup works as usual: yarn install, yarn build or yarn start (or even yarn start:offline)

When you have the Gatsby site running locally, please go to localhost:8000/en/initiatives/open/2019/001 and look at the console. This is what I am trying to achieve on Netlify with rewrites. Keep the en/initiatives/open/2019/001 part in the address bar and access parameters through location and the parameters from the router.

You can find the netlify.toml in the root of the project folder.

The site is already deployed on netlify gatsby-client-routes-ecip dot netlify dot com/en/initiatives/open/2019/001, but this will redirect you and will lose url parameters. That’s the issue.

4

I changed approach from using netlify.toml file to having _redirects which are here https://github.com/kalinchernev/gatsby-client-routes/blob/master/static/_redirects

5

Hi @kalinchernev,

I don’t have time right now to clone the repo locally, build and test, then re-deploy. But what I can tell you is that if you are using Link components then gatsby is not making requests to our servers to load that new content, it’s using the client-side router (reach router) to render based on your code. This means that our redirects won’t do anything for you since the requests aren’t going to Netlify.

Also, with a 404 or 200, we’ll load the content that you’re proxying, however the URL doesn’t change. Gatsby’s client-side routing will load content based on that URL and not based on our redirects.

6

Hi @kalinchernev, were you able to solve it? I’m going through the same problem right now.

7

Hey @ppbruna,

If you’re simply trying to make anything from /initiatives/* redirect to /pages/initiatives.jsx, the following rule would do just that:

/initiatives/* /pages/initiatives.jsx 200!

The exclamation mark forces the rule, even if pages exist. Depending on the redirect type, you should consider a 301. I hope that this fits the bill as my contextual awareness is lacking RE: Gatsby redirects!

There’s other means of achieving redirects for Gatsby with Netlify though I haven’t personally tried this.

8

I had tried the suggested approach with the ! but didn’t work back then.
During the time of addressing the question there was no real support regarding the issue so I didn’t use Netlify redirects in the end.