SPA Routing Issue

alan.j.simeon · 2024-11-15T14:43:38.182Z

Hello!

I’m currently building my first SPA on bubble. I’m having a bit of an issue when it comes to routing.

Say a user “navigates” to the /timetable “page”. I load that section of the page and update the url to https://website.com/timetable

Since it’s an SPA, the user never actually leaves the page, however, if the user reloads the page (or I update the app forcing a reload), they are brought to the 404 page.

Is there a way to solve this problem? Does bubble have a SPA toggle to let it konw that it’s a single page app?

senecadatabase · 2024-11-15T14:58:38.180Z

On my SPA I have a ‘when page is loaded’ workflow on the index page:

Screenshot 2024-11-15 9.50.40 AM730×512 36.8 KB

this way whenever the page loads the ‘home’ page will always show.

flowforges · 2024-11-15T15:28:02.709Z

Hey! The issue happens because Bubble doesn’t natively treat SPA URLs like typical frameworks. To fix this, use URL parameters like ?tab=timetable instead of paths, so Bubble knows where to load on refresh. Alternatively, plugins like Pathfinder can help manage paths for SPA

jagdish_bajaj · 2024-11-15T18:17:30.326Z

URL parameters are a great way to handle SPA navigation.

Not sure if I would use a plugin for this purpose… actually no, I would not use a plugin for this purpose. Why add a dependency when it can be avoided?

I’m old fashioned and like to keep things simple so they simply work.

alan.j.simeon · 2024-11-15T19:00:44.861Z

Darn, was hoping to not have to use parameters so it looked cleaner. Oh well! Parameters it is!

jacob2 · 2024-11-16T03:32:08.412Z

Id have to see how you have them being navigated or how the url is created. Because my spa works great when reloaded or refreshed.

system · 2025-01-24T14:44:27.476Z

This topic was automatically closed after 70 days. New replies are no longer allowed.