How to implement pages in SPA?

Question

HTML

The question is probably some kind of strange, because there should be one page in SPA)
The bottom line is that often when implementing single-page applications, there is a need to implement "pages" (screens, activities). I made an application on the backbone and reinvented the wheel with $.get() and templates in different files, I had to monitor DOM events and load css in semi-automatic mode (((.
The essence of the question is, are there any ready-made solutions or practices, for some reason it seems that I saw something similar in React.
I hope I explained the problem clearly enough. How to implement different screens in a single-line application? Tell me where to dig.
UPD. Yes, I used a router, but roughly speaking, it just reports that the url has changed. I wanted to ask about the very implementation of loading another screen.
UPD2. For example, there are two pages: Profile and dialogs, with completely different markup. There are header and footer, which are the same on all pages. How to implement a markup change in spa when switching to a profile or dialogs.

Answer 1

So the router! Use different urls to connect the required component. routes can be grouped for pages of the same type.

Answer 2

https://github.com/xmoonlight/includeHTML
A modern JavaScript router in 100 lines

Answer 3

if I understand you correctly, you are talking about router

Answer 4

https://reacttraining.com/react-router/

Answer 5

on the main page-window, you can make additional window-pages - iframe
in them your domains are displayed,
I did cms like this - https://habrahabr.ru/post/322204/
so the server does not strain at all - it produces ready-made html