React-Snap and React-Router - Page refresh directs to homepage, then path - with CSS broken

Bug Report

Current Behavior

Once built and hosted - visiting any route other than the homepage and refreshing the page (or pressing back) will first redirect to the homepage, then load the route/url you want, and CSS will then be broken.

The url will be: domain.com/about_us/contact_us (which is 3 components deep, 1. homepage 2. about us and 3. contact us)
Refresh the page with f5 or press the back button to go to about us
URL shows the correct url, but homepage loads first, then the route loads, and the CSS is then broken.

Same results if just copy and pasting the URL and visiting a nested route directly.

Cannot link to reproducible as its a private app not released.

Using standard react-router routes where domain.com/about_us would direct to the about_us component.

Possible Solution

Trying to set a custom serviceworker to use 200.html as the index page - but currently get this issue: https://stackoverflow.com/questions/62736986/serviceworker-workbox-v3-5-unable-to-find-a-place-to-inject-the-manifest-in

Error: Unable to find a place to inject the manifest. Please ensure that your service worker file contains the following: self.__WB_MANIFEST        
    at Object.injectManifest

Additional context/Screenshots

React Scripts:

(with trying to use custom service worker, it still causes issues with or without the build-sw script)

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts --max_old_space_size=4096 build && npm run build-sw",
    "build-sw": "node ./src/sw-build.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postbuild": "react-snap"
  },

Npm run build results in React-Snap error:


....
�💬  console.log at /createstore: %c action %cFETCH_ALL_LISTING_SUCCESS %c@ 13:05:38.919 color: gray; font-weight: lighter; color: inherit; color: gray; font-weight: lighte
️�💬  console.log at /createstore: %c prev state color: #9E9E9E; font-weight: bold JSHandle@obje
️�💬  console.log at /createstore: %c action     color: #03A9F4; font-weight: bold JSHandle@object
️�💬  console.log at /createstore: %c next state color: #4CAF50; font-weight: bold JSHandle@object
️�💬  console.log at /createstore: console.groupEnd
�💬  console.log at /createstore: { took: 1
  timed_out: false,
  _shards: { total: 56, successful: 56, skipped: 0, failed: 0 },
  hits:
   { total: { value: 13, relation: 'eq' },
     max_score: 1,
     hits:
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] } }
⚠️  warning: inlining CSS more than 20kb (21.060546875kb, critical)
✅  crawled 10 out of 12 (/)
⚠️  warning: inlining CSS more than 20kb (21.060546875kb, critical)
⚠️  warning: 404 page title does not contain "404" string
/
�💬  in browser redirect (/)
✅  crawled 12 out of 12 (/404.html)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 2.0@0.1.0 postbuild: `react-snap`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the v2.0@0.1.0 postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

How can we fix this? I can't believe I'm the only one having this issue with react-router being so popular?

stereobooster / react-snap

React-Snap and React-Router - Page refresh directs to homepage, then path - with CSS broken #481

Bug Report