stereobooster / react-snap

👻 Zero-configuration framework-agnostic static prerendering for SPAs
MIT License
5.06k stars 394 forks source link

[solved] React router doesn't deliver prerendered files #382

Closed chrisLovesCode closed 5 years ago

chrisLovesCode commented 5 years ago

Bug Report

react-snap renders correct html files in the build/public folder of my create-react-app, but when calling the links in the browser and have a look at the source code (e.g. view-source:https://runen-lernen.netlify.com/quiz) it shows the index pages source. Also navigation link active state is broken.

Reproducible demo Live Example: https://runen-lernen.netlify.com

Code: https://github.com/chrisLovesCode/rsbug

npm run build npm run serve

chrisLovesCode commented 5 years ago

SOLVED: in found another issue that pointed me to the right direction.

So since it was an PWA i had to customize the servie worker to point to 200.html, which this tutorial was great for: https://karannagupta.com/using-custom-workbox-service-workers-with-create-react-app/

i followed the tut but changed this to 200 NOT index.html: /* custom cache rules*/ workbox.routing.registerNavigationRoute('/200.html', { blacklist: [/^\/_/, /\/[^\/]+\.[^\/]+$/], });

I left with the navlink active state problem for some strange reason, so i did this in my App.js:

` const isActive = (path, match, location) => !!(match || path === location.pathname); <NavLink exact={true} to="/" isActive={isActive.bind(this, '/')}> Übersetzer '

PS: in dev tools > app i needed to manualy unregister the old SW from the client after setting up my custom SW. something that can get overlooked.

after all i learend a lot new stuff about SW'S :D