What you are trying to implement is a Single Page Application (SPA). There is not a correct answer to your question, but multiple frameworks that I could suggest to answer your question - I will tell one example first, and give you a hint of how they work (could differ from one to the other).
One of the simplest that I know is Barba.js, where you put your HTML content in multiple content tags, configure these as pages and their routes, and configure transitions.
Below is an example copied from their documentation (link to this exact documentation by clicking the above hyperlink):
<body data-barba="wrapper">
<!-- put here content that will not change
between your pages, like <header> or <nav> -->
<main data-barba="container" data-barba-namespace="home">
<!-- put here the content you wish to change
between your pages, like your main content <h1> or <p> -->
</main>
<!-- put here content that will not change
between your pages, like <footer> -->
</body>
and the router definition in your main-script.js that you import when executing HTML:
import barba from '@barba/core';
import barbaRouter from '@barba/router';
// define your routes
const myRoutes = [{
path: '/index',
name: 'home'
}, {
path: '/product/:id',
name: 'item'
}];
// tell Barba to use the router with your routes
barba.use(barbaRouter, {
routes: myRoutes
});
// init Barba
barba.init();
Now back to your question topics, which are important configurations required for any SPA:
- -> All requests must be proxied to this
/index.html file - if you request for /any/other/path, it should actually serve the /index.html file - see below basic NGINX configuration for reference:
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / { # Anything that goes beyond path /*
try_files $uri $uri/ /index.html; # it tries to open files, such as image resources, .js, etc. - if not found, it serves the /index.html
}
}
- and 3. -> This is what frameworks try to simplify. They use methods to explode URL and get query parameters from URL - abstracting all the rules to display/hide content based on the URL you are. Below some snippets of these functions mentioned above.
Explode URL (source):
var url = 'http://www.mymainsite.com/somepath/path2/path3/path4';
var pathname = new URL(url).pathname;
console.log(pathname);
Parse query-params (source):
const queryString = "?product=shirt&color=blue&newuser&size=m"; // This can be fetched from "window.location.search" in real world.
const urlParams = new URLSearchParams(queryString);
const product = urlParams.get('product')
console.log(product);
const color = urlParams.get('color')
console.log(color);
