How does Reddit achieve this page navigation?

Wappler General Need Help
1

That page has a close button and the underlying search result still in the background, as if it was a modal although it has a full url which I need.
The original page is back on upon clicking close.

2

That is actually a div/modal displayed there over the content.

1 Like
3

I don’t think thats what it is. The URL changes on clicking the close button. And the content in the list loads at that point as well.
If it would have been a modal, URL would not have changed.

This is a SPA from what I can see, with the modal-like element showing from a child content page. Hence, when closed, the page does not refresh, but redirects to another child content page.

3 Likes
4

The url changes indeed, and the the div/modal is then loaded on the page based on the URL.

Screenshot_5
Screenshot_52554Ă—1371 1.4 MB

So this content is loaded / added on the page once the url is loaded

Screenshot_6
Screenshot_62554Ă—1371 1.32 MB

and i think this still can be called a modal (as it is styled and acts like a modal) :slight_smile: And you can also show or hide content or divs or modals the same way with Wappler, based on your URL.

5
  1. What is an SPA @sid?
  2. The URL changes, but there is no overall page reload. Could they have used a JavaScript .pushState? ( javascript - Updating address bar with new URL without hash or reloading the page - Stack Overflow and then how to do this in Wappler?
window.history.pushState("object or string", "Title", "/new-url");
6

SPA = Single Page App

For PHP / .NET

For NodeJS

So in the reddit case they have this div/modal element show on the page when the specific URL calling the “details” content page to load inside the main one.

Following the tutorials i linked to you can achieve the same behavior:

modal
modal851Ă—659 77.4 KB

1 Like
7

That is very different from what is happenning here actually.
Its more like a Conditional Region type of thing, but not really.
The content behind div/modal is a different page/component... Which gets loaded only when the URL changes.
With CR, the HTML is loaded, just hidden from DOM. We can show/hide it based on condition, but its actually already downloaded from the server.

In reddit's case, its neither show/hide nor CR. Its either completely different content page that is loading.. or its using some server side React Native stuff (that I don't understand) to fetch the second page partially.

8

Understood and thank you for pointing it out. For an SPA with Routing and includes as Content Pages, is the entire content of all includes loaded at main page load, or requested/loaded on click?