Как перезагрузить страницу при реализации API истории

Question

Я пытаюсь использовать API истории, чтобы позволить мне использовать кнопки назад и вперед при загрузке контента динамически. Вот код, который я использую, и пример объекта состояния, который я использую.

Как я использую объект состояния и pushstate()

var stateObj = {Content : homeSection.innerHTML, "Product" : detail.Name, Title : title.innerHTML, Section:"dynamicArticle"}; 
    window.history.pushState(stateObj, "", detailName); 

    window.addEventListener('popstate', function(event) { 
    updateContent(event.state); 
    }); 

Функция используется:

function updateContent(stateObject) { 
    if (stateObject){ 
    homeSection = document.getElementById(stateObject.Section); 
    homeSection.innerHTML = stateObject.Content; 
    title.innerHTML = stateObject.Title; 

    var items = document.querySelectorAll(".homeItem"); 
    if(items){ 
     for(i=0; i<items.length; i++){ 
     items[i].addEventListener("click", selectedProduct); 
     } 
    } 

    checkoutButton = document.getElementById('checkoutButton'); 
    if(checkoutButton){ 
     checkoutButton.addEventListener('click', function(){ 
      displayCheckout(); 
     }); 
    } 

    basketButton = document.getElementById("basketButton"); 
    quantityInput = document.getElementById("productQuantity"); 
    if(basketButton){ 
     basketButton.addEventListener('click', clicked); 
     basketButton.addEventListener('click', updateBasketNumber); 
     quantityInput.value = "1"; 
    } 

    searchSort = document.getElementById("sort"); 
    if(searchSort){ 
     var items = document.querySelectorAll(".searchResult"); 
     for(i=0; i<items.length; i++){ 
     items[i].addEventListener("click", selectedProduct); 
     } 

     searchSort.addEventListener("change", function(){ 
     sort = searchSort.value; 
     searchItem(e, sort); 
     }); 
    } 
    } 
    else{ 
    return; 
    } 
} 

То, что я борюсь с, что если я перейти к одной из страниц с помощью pushState() и I попробуйте перезагрузить страницу, так как вы ожидаете, что страница не будет найдена.

Я спрашиваю, есть ли способ разрешить перезагрузку или для кого-то, чтобы перейти к URL без него дает ошибку, и дает правильное содержимое

Answer 1

Так же, как @ джон-Koops указал в комментарии вы необходимо настроить сервер для перенаправления запросов на ту же страницу, на которой вы связываете ветку.

Если вы используете Apache 2.2.16+ это получить так просто, как:

FallbackResource /index.html 

Это будет переписать все URL, в одну точку входа, которая index.html страницы.

Другие решения зависят от сервера, на котором вы работаете.