I have a post that I made over on Reddit that pretty much details my issue:
https://www.reddit.com/r/learnjavascript/comments/sljr6r/spa_refreshpopstate_function_help/
If you are still wanting me to lay it out here, then allow me to explain.
I have a website that I help run, and I am in the process of developing an SPA. I have sample data setup in a table and I currently have it functioning to remove the table and populate the selected Pokemon's name in a new tag. My issue is that if a user is to ever click the "Back/Forward/Refresh" buttons, either nothing happens or it then loads the default 404 for our site. To my knowledge, I am unable to access the server that SquareSpace works off of, and I'm not able to assign routes to specific html files due to us working out of SS. Below is the link to the page I'm working on. If I need to provide more information I can.
SPAs have conflicts with server distributed pages. As the front-end can edit the URL (/pages), once refreshed, the server takes that URL and ends up not finding the page in the server.
Usually, you'd redirect everything from the server URL to your index.html to handle the URL, but since you can't acces the back-end, I'd say the best option here is to use a hash-router for your SPA
More here, full detailed explanation about the BrowserRouter and HashRouter difference: https://itnext.io/why-using-hash-based-urls-in-your-react-spa-will-save-you-more-time-than-you-think-a21e2c560879