Window.history API - 404 URL/

Question

上にあるので、私はwindow.history.pushStateを使うことを学んでいます。

は、私は3つのリンクを持っている：

<a href="/">Home</a> 
<a href="/skills">Skills</a> 
<a href="/experiences">Experiences</a> 

ここに私のコードです：正しくロード

(function() { 
function loadHtml(url, cb) { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      cb(this.responseText); 
     } 
    }; 
    xhttp.open("GET", url, true); 
    xhttp.send(); 
} 

function setHrefEvents() { 
    var links = document.getElementsByClassName('menu')[0].getElementsByTagName('li'); 

    for (i = 0; i < links.length; i++) { 
     links[i].getElementsByTagName('a')[0].addEventListener('click', function(e) { 
      e.preventDefault(); 
      window.history.pushState({ 
        urlPath: 'views/' + (e.target.pathname.match(/\/([a-z]*)/)[1] || 'home') + '.html' 
       }, 
       e.target.pathname.match(/\/([a-z]*)/)[1], e.target.pathname); 
      loadHtml(window.history.state.urlPath, function(html) { 
       document.getElementsByTagName('main')[0].innerHTML = html; 
      }); 
     }); 
    } 
} 

function setUrl() { 
    window.history.pushState({ 
     urlPath: 'views/' + (window.location.pathname === '/' ? 'home' : window.location.pathname) + '.html' 
    }, 'Title', window.location.pathname); 
    loadHtml(window.history.state.urlPath, function(html) { 
     document.getElementsByTagName('main')[0].innerHTML = html; 
    }); 
    return; 
} 

function setFooter() { 
    document.getElementsByClassName('footer-date')[0].innerHTML = new Date().getFullYear(); 
} 

setFooter(); 
setUrl(); 
setHrefEvents(); 
})(); 

私はリンクをクリックし

は、履歴状態がよく押され、私の内容は。しかし、私が localhost/skillsのページをリロードすると404が表示されます。

私の質問は、404 localhost/skillsをどうやって管理できますか？

私はそれが助けることができるかどうかわかりませんが、私はnginxサーバー上で自分のウェブサイトを実行しています。 私は見逃したことがあり、私は何がわかりません。

ありがとうございました！

Answer 1

私の解決策が見つかりました！

私のウェブサーバーの設定です。ここで

：https://gist.github.com/aotimme/5006831

これはnginxの+ JavaScriptの履歴APIのための作業構成です。

希望すると助かります！