How to correctly organize the approach with the ajax implementation?

Question

CMS

Good afternoon!
I'm building a website right now and I have a lot of questions.
When you go to the section, you can choose an apartment, and there you can change sections within this page itself. Implementing ajax loading is not difficult.
I am concerned about the following:
1. I read articles about this in many forums and many developers prepare information that needs to be unloaded by ajax by writing snippets for specific cms.
I only use links. I create a resource with a block that needs to be loaded. I display links to child resources on the general page. I take all the links into an array and then I load
it. That is, I work only with a js file. How right/wrong is this?

2. In the original, when flipping through sections, the url also changes. Changing
the url is not a problem.
history.pushState('', '', "/newpath.php");
The problem is that if you refresh the page with such an updated address, then this ajax-loadable block will be displayed (which is logical). Then you need to separately create resources for loading these small blocks and separate full-fledged resources corresponding to them? So there are two templates?

Please advise which approach to use.
Here is my draft

Answer 1

I did this:
Thus, I solved the problem so that the url would give the same content even through js, when you crawl through the site, and through a direct link.
Now I would use reactjs along with its routing, but this is optional ))