But having your whole React-app being re-initialised on every page-load would be really bad. Luckily, a couple of months ago I stumbled onto Turbolinks thanks to this great post on changelog.com. With this I hoped to keep for instance an account-box unchanged while the rest of the content is loaded via AJAX and inserted the DOM.
Turns out, integrating Turbolinks is extremely easy but nearly immediately I still ran into a small problem. Whenever I navigated from one page to another, I was greeted by a blank page and something like this showing up in the browser’s JS console:
turbolinks.js:5 Uncaught TypeError: Cannot read property 'querySelector' of null at n.t.SnapshotRenderer.n.findFirstAutofocusableElement (turbolinks.js:5) at n.t.SnapshotRenderer.n.focusFirstAutofocusableElement (turbolinks.js:5) at turbolinks.js:5
Sadly, I couldn’t find any usable information about this so I decided to
experiment with various Hugo flags. Seems like the live-reload feature is
properly. If I just start Hugo with
hugo serve --disableLiveReload everything
That’s not an ideal solution by any means, but for now it’s enough 🙂