Window.history API - 404 URL/

Question

에 있기 때문에 window.history.pushState를 사용하는 법을 배우고 있습니다.

나는 세 개의 링크가 :

<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가됩니다.

제 질문은을 어떻게 관리 할 수 ​​있습니까?

도움이 될지 모르겠지만 웹 사이트를 nginx 서버에서 실행 중입니다. 내가 놓친 무엇인가 obviolously 무엇을 모르겠다.

도움 주셔서 감사합니다.

Answer 1

내 솔루션을 찾았습니다!

내 웹 서버 구성에 관한 내용입니다. 여기

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

이의 nginx + 자바 스크립트 역사 API에 대한 작업 구성입니다.

희망이 도움이 될 것입니다!