Navigating to the ‘Home’ Page in a Single Page Application (SPA)
Decided to revisit an old SPA project. Everything works alright. Click an item and it pulls up the images and data associated with it. Click another item and it’s all replaced with new images and data associated with that link and so forth. One thing that bothered me was that I couldn’t return to the ‘home’ page; the main page that’s initially seen.
Since it’s a SPA, it only has one url path. Clicking on links and everything doesn’t take you to a new page. It just replaces the contents on the one page. So, there’s no clicking the ‘back’ button on the browser either.
It wasn’t crucial to have the ability to return to the ‘home’ page but, that could change in the future depending on what information I may put there. Or, could put there. And, I just wanted to feel settled by having a completed circle and being able to return to that ‘home’ page like I’m accustomed to most well-designed websites being able to do.
The Search for an Answer
This SPA uses vanilla JavaScript for the frontend and Ruby for the data in the backend. To get everything to load I have 2 functions that are called at the beginning that fetch all the data and set it into motion. This was kinda fun, like strategically setting up dominos.. One function sets other functions into motion. Event callbacks and buttons are set up.
Anyways, I did a bunch of research that suggested using pushstate and popstate to go into the history and manually put in the home page you want to go to. I don’t know why this came up so much since I have a SPA without any history to manipulate. Everything happens on the one page according to the browser.
Another search result suggested linking all of my clickable items to a URL route. That sounds great in theory. And probably a good practice for the long-term if I want users to be able to bookmark a specific route with specific images and data.
The functionality I want is so simple I don’t want to mess with routes right now. I just want to be able to click on my logo at the top and be shown the ‘home’ page again. Simple.
Then, I thought I was being clever by building a function that would just re-call the initial 2 functions that would fetch all the data and set everything up again. I think I got a CORS error? It didn’t like that an on-click on the same page was requesting the data and images that were already in the SPA. So it flagged it.
This got me thinking. I don’t want to make routes and paths just so I can set up a complicated system to track history or unique pages that can be navigated directly to. I basically just want a page refresh so everything goes back to its original state. This was one of those times where I wish I could just accidentally trigger it somehow.
While looking up how to trigger a page refresh in a SPA, I found another complicated solution where every 5 minutes a function will check if the ‘last-modified’ timestamp in the manifest.json file matches what is stored in localstorage. If so, it refreshes the page when the user navigates away and changes the route. It’s quite brilliant but more complicated than I want at the moment for my simple SPA.
The useful morsel:
window.location.reload( )Up to this point I’ve seen a lot on window.history but not on ‘location’. According to W3 Schools, it is an object that ‘can be used to get the current page address (URL) and to redirect the browser to a new page.’
Future Uses
All of this digging around just to get a small piece of code working. The joy of coding! 💻
At least I learned a couple other things along the way that can be useful for future elaborate projects.
Also, there’s a bug that’s been bothering me that ‘window.location.reload( )’ might be able to fix. Whenever I edit an item and save the changes, the item name gets added to the bottom of the list I have displayed along with the original item that’s already there. And if the wrong one is clicked it throws an error. Just maybe, if I can force a refresh when I save the changes, everything will go a as intended.
