Create multi page design with single URL

Question

My goal is to create multi screens in one single page.Depending upon the action the user will be able to navigate from one screen to another screen.I have shared the images below

When the user clicks on any of the categories,it will navigate to a second screen.

While clicking back it will again comeback to the first screen without change in URL.I have tried creating a full page modal and could not achieve this kind of functionality.I am not sure whether it should be done as a modal with multiple screens.

Please suggest me any method I can achieve this.

Answer 1

What you are likely referring to is creating an SPA or Single Page Application. This can be done through 'Vanilla' JavaScript at great effort or via one of many JavaScript Libraries or Frameworks.

Reactjs, Angular and Vuejs are probably the most common.

IF you were to use Reactjs then you could use what's called React Router. React Router would do what you want to do very easily. Doing it in Vanilla JavaScript would require a great deal of work or it would be very ugly.

However you did ask, so one way of doing would be to use JavaScript to load an iFrame or to make a top level parent element display: none and another to then display:...

Also if you are thinking of something less hacky, but not something as sophisticated as React or it's peers, then check this link out for a relevant article. Perhaps it's a path forward that you would prefer.

https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng

Answer 2

To help rookies like me, you can make a single page app or SPA, or a dynamic page that updates based on user actions with a single URL, in vanilla Javascript. You don't have to use a framework.

There are 3 concepts you need to understand:

The server doesn't see past the # in the URL

You need to tell your code what screen you want to display. Normally you would have URL.com/page-you-are-on and click a link to go to URL.com/page-you-want

However, in a single page app, you don't go to different URLs. So how does it work? You use a fragment identifier or a pound symbol. #

The # in the URL doesn't get recognized by the server. So URL.com/page#page1 and URL.com/page#page2 to the server is the exact same URL.com/page.

So you can use the URL to indicate to the server what page you want, in your single page app.

A Router can decide what to show based on the # URL fragment

So your page loads at URL.com/page#page-you-want. You need to inspect the URL and get the piece past the #. You inspect the URL, and split it on the #. That means you get page-you-want . Your code then uses that to decide what content to display. The function or file that does this is commonly called a router because it routes to the file or function you want displayed.

Once you know what to show, dynamically update the DOM

This is where the magic happens. Your website looks at the URL, gets everything past the #, sends it to function that decides what to display. You now need to display it.

The DOM has lots of functions and methods that help it update and create various things. It could be as simple as this:

function displayPageAbout() {
  // the router calls this if the URL is URL.com/page#about

  let pageSection = document.getElementById('pageSection') //this is where the page will be displayed

  //create the div and give it content
  let page = document.createElement('div');
  page.textContent = 'This is the About Page'

  //add the div to the spot on the page where the content should go
  pageSection.appendChild(page);
}

That is basically it.

If found these two examples and tutorials useful in understanding what it is, and how it could work.

https://blog.jeremylikness.com/blog/build-a-spa-site-with-vanillajs/

https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng

Good luck!