Broken redirect

Support
1

I have a create-react-app where a functioning redirect has suddenly broken. I don’t open this page frequently, so I’m not exactly sure when it broke.

https://sutta-index.netlify.app/

I’m not usigng ReactRouter or anything like that. I just have a static html page in the repository that I want to link to.

Here is my _redirects file (github):

# Redirects from what the browser requests to what we serve

/table /locatorcounttable.html

I have also tried

# Redirects from what the browser requests to what we serve

/table /locatorcounttable.html 200!

The file locatorCountTable.html is located in public

The html of the link is

<a href="/table" rel="noreferrer" target="_blank">Table of headwords</a>

If you want to test for yourself, you can find the link by opening the app, clicking on the “i” dot icon in the top row and then opening the “Misc” section:

image
image1141×175 13.2 KB

What happens: In the app when I click on the above link, the entire app reopens in a new tab (with /table in the url) instead of loading locatorcounttable.html in a new tab.

Looking at the build report, I can see that there is a single rule being processed:

image
image990×193 8.39 KB

When I download the whole build, I see the _redirects file in the root as well as locatorcounttable.html

I have tried the AI chatbot with no solution. I have also read this help article.

Can anyone point me in the right direction?

2

@bluesky Your service worker is almost certainly responsible for this.

It’s likely no request is even making it to Netlify for the redirect/rewrite to take place.

See:

If you delete it and directly access a random URL you will get :

image
image1278×492 86.4 KB

Having visited the site first so the service worker is running you get:

image
image852×463 78.9 KB

1 Like
3

Oh, I did add that service worker a few months back, so the timing sounds right.

I added the service worker following some how-to online and just did what it said. The service worker functioned properly according to the user that had requested I implement it (so they could use my app offline).

All that to say I don’t really know anything about service workers.

Are you able to point me towards a help article or offer some advice? I did a google search for react service worker breaking redirect but I’m not seeing an easy solution.

ETA: I guess the main question I have is if it is even possible to have a service worker and redirect function on the same site.

4

OK! Using ChatGPT I got this change to my service worker code:

const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
registerRoute(
  ({ request, url }) => {
    // If this isn't a navigation, skip.
    if (request.mode !== 'navigate') {
      return false;
    }
    
    // Skip URLs that start with /_ (e.g., API calls)
    if (url.pathname.startsWith('/_')) {
      return false;
    }
    
    // Skip URLs that look like a file (e.g., /some/file.png)
    if (url.pathname.match(fileExtensionRegexp)) {
      return false;
    }
    
    // Skip Netlify redirects (adjust this pattern as needed)
    if (url.pathname.startsWith('/table')) {
      return false;
    }

    // If all checks pass, handle the request with index.html
    return true;
  },
  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
);

And that fixed it.

Thank you so much @nathanmartin, I would have never figured this out without you!

5

@bluesky Excellent, just be aware that as per the notes that ChatGPT has added, you would need to keep that code updated to align with any redirects/rewrites that you add or change.

1 Like