Weird refresh of root route in other routes with CRA 2

[joaopedrodcf]

Bug Report

Current Behavior
I have a project that uses Create react app (CRA 2) that can be found here: https://github.com/joaopedrodcf/yokaidex and I have been trying to add react-snap to improve the performance of the first render.

Maybe also important is that this is a PWA and uses serviceWorker.register(); from the CRA 2.

What's happening in the site that you can see in here https://5ccf2032e1aef600085709d4--yokaidex.netlify.com is that if you refresh the page in a route different than the root one it always shows the root prerender 😢

Reproducible demo
Repo branch for react-snap: https://github.com/joaopedrodcf/yokaidex/pull/114/files
I Am using the routes like was told in this issue #22

<Route
    exact
    path="/yokai-watch-:version/about-us/"
    component={AboutUs} />

Example root: https://5ccf2032e1aef600085709d4--yokaidex.netlify.com

If we look in the first request of the network we can see that it returns the correct page

An example where doesn't work: https://5ccf337878f9f600074fbd46--yokaidex.netlify.com/yokai-watch-3/yokais/sigh-durr/
If we look at the network we can see that the page that is returned is the root

Weird behaviour, if I clear the cache and refresh in https://5ccf337878f9f600074fbd46--yokaidex.netlify.com/yokai-watch-3/yokais/sigh-durr/ it shows the correct page, if I refresh again shows the wrong one 😢

Expected behavior/code
What I expect to happen is that if I refresh to see the respective page instead of the root one

[stereobooster]

The problem is that service worker uses index.html as fallback, that is why you see index.html on refresh, you need to change it to use 200.html, which is index.html before prerendering. Or you can turn off service worker.

UPD: this is what you need to customize service worker facebook/create-react-app#5359

[joaopedrodcf]

Hi again @stereobooster thanks for the response and documentation really helped me using react-snap as I wanted!
After that post, I found this: facebook/create-react-app#5673 (comment) where @karannagupta tells how he configured the workbox service worker without ejecting.

I tried it, and it worked, I only changed as you said the index.html to 200.html like this on the sw.js that the guy talked about in his comment:

/* custom cache rules */
        workbox.routing.registerNavigationRoute('/200.html', {
            blacklist: [/^\/_/, /\/[^\/]+\.[^\/]+$/]
        });

Thank you so much for your support! 👍

Also a side question the only way for react-snap to work is having the routes ending with / ?

[stereobooster]

Also a side question the only way for react-snap to work is having the routes ending with / ?

Tell me more, I'm not following

[joaopedrodcf]

As this is being referenced in another issue and the main issue was solved gonna close it.

The issue with the same problem is #386