Не до конца понимаю как работает pushState и как вообще реализовать простейшее SPA без использования хэша и php на чистом JS (разве что с jQuery)

Пытался найти информацию о современной реализации SPA без фреймворков и наткнулся на History API, которое вроде как должно помочь в реализации изменения значения URL после слэша без перезагрузки всей страницы. И хоть я не понял предназначение первого аргумента state, я выяснил, что он не обязателен и можно указать просто null. Далее я написал следующий код

$('.newPage').on('click', function() {
        history.pushState(null, null, 'newPage');
    })

Однако при клике на эту кнопку меню в консоли выдаётся следующая ошибка

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL '...' cannot be created in a document with origin 'null' and URL '...' at HTMLDivElement. (...) at HTMLDivElement.dispatch (https://code.jquery.com/jquery-3.6.0.min.js:2:43064) at v.handle (https://code.jquery.com/jquery-3.6.0.min.js:2:41048)

В интернете я нашёл лишь громоздкие гайды, использующие ещё и серверную часть, либо реализация на хэшах. Однако всё что мне нужно это лишь реализовать добавление по клику в URL значения после слэш и привязка значения содержимого определённого элемента к этому значению URL. Возможно я чего-то не понимаю и такая простая реализация вообще не возможна.