Стрелки назад / вперед в браузере при изменении только HTML-контента

Question

Я создал главную страницу (с заголовком, боковой панелью и нижним колонтитулом) для своего веб-приложения, и я изменяю только содержимое этой страницы, используя элемент load:

<aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
        <!-- sidebar menu: : style can be found in sidebar.less -->
        <ul class="sidebar-menu">
            <li class="header">MAIN NAVIGATION</li>
            <li sec:authorize="hasAnyRole('ROLE_ADMIN')">
                <a onCLick="testAction('/test')">
                    <i class="fa fa-search" aria-hidden="true"></i>
                    <span>Test</span>
                </a>
            </li>
        </ul>
    </section>
</aside>

<!-- Content Wrapper. Contains page content -->
<div id="main_content" class="content-wrapper"></div>
<footer class="main-footer"></footer>
<!-- Dashboard js -->
<script th:src="@{/static/assets/js/index.js?date=17102017}" type="text/javascript"></script>

и в javascript у меня есть:

function testAction(url){
    $("#main_content").load(url, function(responseTxt, statusTxt, xhr){
        if(statusTxt == "error")
            $("#main_content").load("/404", function(responseTxt, statusTxt, xhr){              
            });
    });
}

Таким образом, я загружаю только содержимое страницы, а не всю страницу, как это было до этого изменения (я использовал Thymeleaf Layout Dialect).Но у меня есть проблема: теперь URL-адрес одинаков для всех страниц, так как я меняю только содержимое, и теперь кнопка «Назад / Далее» не работает.Я попытался с

window.history.pushState

, но изменил только URL-адрес, а при нажатии на спину содержимое осталось прежним.У вас есть идея, как я могу заставить эти кнопки работать? Спасибо PS: если встроенной функции не существует, я должен использовать список с историей страниц и загружать вручную при нажатии кнопки «Далее / Назад»