I'm making a SPA app with react 18 and Django. I'm having trouble understanding and fixing an issue where after I encounter a 404 and press back, the browser's title changes but doesn't reload the page, even though the URL changes to match the title.
To make it happen, I navigate to the home page, "/". I press a react "Link" to go to "/e" within the SPA. If I press reload on "/e", it works, because I added a path in the django urls.py for "/e" and also a react SPA react router route in my App.js. I then click another link to navigate to "/b". Now that I'm at "/b", which is a a react router route but NOT a django path, and refresh, I get a standard django "natural", non SPA 404.
Pressing browser Back, the title of the "/e" route is correct, and the URL itself of the browser is correct, but the page does not reload my SPA and it stays a 404 page. I do not understand this behavior or know how to fix it.
If I press back one more time, it will THEN reload the spa, and show "/" correctly, then pressing forward forward will get me back to "/b" within the SPA.
What I would like to happen is that pressing back from the 404 will reload "/e" and display it.
I would think it has to do with my routing and cache, but I don't understand how or why. What I think I know is that when I encounter the 404, it wipes my SPA, and there's should be no javascript running, so pressing back should reload my app in my mind. But, it doesn't, it just shows the correct title and URL for "/e" and still the 404 and all the DOM elements remain exactly the same as the 404, there is no load time so pressing back from the natural-backend 404 feels like it's still in the SPA or something, which makes no sense to me.
If anyone has an idea, please let me know. Thank you.