Ты на чем ваяешь все это?

Собираю webpack-ом, пишу без Reacta на js.
Запускаю 2 командами

npm run start
npm run dev

В конфиге вебпака есть

P.s на реакте не советуйте:no:

Ясно...

Спецу советовать - только портить. :D
Т.ч. все в твоих руках!

Как я понял вы не знаете как это исправить (( ?чтобы с бубной не танцевать

Я потерял интерес к твоей проблеме...
Тестовый пример ты не делаешь...
Хочешь лично делать х/з какой вариант в своем его понимании...

Если так не получится обьяснить, чтобы помогли тогда я не знаю
 

1 страница:

function main(root) {
    const box = document.createElement('div');
    const box2 = document.createElement('div');
    box.style.backgroundImage = "url('https://klike.net/uploads/posts/2019-06/1561182204_1.jpg')";
    box.classList.add('box-main');
    box2.classList.add('box-main__main');
    box.append(box2);
    root.append(box);
}

main(document.querySelector('main'));

стили для 1 страницы:

.box-main {
    width: 50%;
    height: 50vh;
    &__main {
        width: 350px;
        height: 200px;
        background-color: rgb(87, 104, 116);
    }
}

2 страница:

function services(root) {
    const box = document.createElement('div');
    const box2 = document.createElement('div');
    box.classList.add('box-ser');
    box2.classList.add('box-ser__ser');
    box.append(box2);
    root.append(box);
}

services(document.querySelector('main'));

стили для 2 страницы:

.box-ser {
    width: 50%;
    height: 50vh;
    background-color: rgb(217, 107, 245);
    &__ser {
        width: 350px;
        height: 200px;
        background-color: rgb(25, 135, 213);
    }
}

обложка тег main(тег типо как header и footer):

function main(root) {
    const globalMain = document.createElement('main');
    globalMain.classList.add('global-main'); 
    root.append(globalMain);
}

main(document.querySelector('body'));

скрип для подключения js кода(страниц):

import './header-js/header.js';
import './main-js/main.js';
import './main-page/main.js';
import './portfolio-page/portfolio.js';
import './services-page/services.js';
import './contact-page/contact.js';

скрип для подключение и js кода и scss стили:

import './contact-page/contact.scss';
import './main-js/main.scss';
import './script.js';

Разноцветные блоки это и есть контен, тоесть 1 разноцветный блок это 1 страница

P.S. Надеюсь теперь пример подойдет:help: :help: :help:

Не совсем понятно зачем ты сразу запихнул в браузер сразу все страницы... :-?
Обычно стараются генерить только нужные в определенный момент элементы.
Делают "точку входа".
Потом вставляют в нее хтмл нужной сейчас страницы.
По неким событиям убирают хтмл не нужной страницы и вставляют нужный.

Если же ты вставил таки все страницы разом - хотя бы прячь не нужные

display: none;

А потом включай нужную и прячь не нужную...
Но при таком подходе в ДОМ будут все твои страницы.

Если правильно понял что нужно добавить функцию на js которая будет удалять из страницы после клика ненужные страницы и добовлять при другом клике обратно эту страницу и удалять соседние. Я не уверен что это делается таким кодом.

Функция чтобы элементы удалять:

function clickPage(root) {
    main.addEventListener('click', () => {
        contact.remove();
        services.remove();
        portfolio.remove();
    });
}

clickPage(document.querySelector('main'));

P.S. Если знаете источники какие нибудь где прям с примерами и засжовыванием расказывают как ограничить страницы, поделить тогда пожалуйсто

Все делается разом. Не в несколько приемов. :)

Я тебе уже ранее писал про React.JS и Vue.JS - но тебя они не интересуют.

Почитай как делается т.н. "роутинг" страниц. Оба ПО имеют несколько вариантов его реализации.

Ех... Спасибо и за это