ロケーションパス名による空白ページエラー

Question

タイトル：

私は複数のページを持つウェブページを持っています。このページはもともとは、コンテンツの一部を別々のファイルに移動してjQueryテンプレートプラグインを使用して動的にロードする前に、jQueryを使用して作成された単一のページアプリケーションでした。ページはデフォルトでpathname（ '/'）から始まり、コンテンツが変更されるたびにURLのpathnameも変更されます。

function goTo(page){ 
    // Changing URL without reloading the page (to allow changing the URL 
    //state without changing the page) 
    if (page !== 'main'){ 
     console.log("Yes it is not main!"); 
     window.history.pushState("", "", "/"+page); 
    } else { 
     console.log("Yes it is main!"); 
     window.history.pushState("", "", "/"); 
    } 

    // Set page template 
    $('#main').loadTemplate('pages/'+page+'.html'); 
} 

上記は、ユーザーがリンクをクリックするたびにURLとコンテンツを変更する方法です。

URLにパス名があるときにページをリフレッシュすると、ページに404エラー（見つからない）が返され、完全に空の未知の空白のHTMLページが返されるという問題が発生しますCSSとスクリプトはロードされません）。

たとえば、メインページのURLはhttp://localhost:8000で、ページAをクリックするとURLはhttp://localhost:8000/pageAになります。しかし、ページAでは、ページをリフレッシュすると空白に戻ります。 URLをhttp://localhost:8000にリセットした場合にのみ、ページは正常に更新されます。

この空白のページを修正する方法はありますか？pathnameに問題がありますか？ DOMがロードされる前にpathnameのように変更しましたか？ window.history.pushStateを使用して

おかげ

Answer 1

あなたは、ブラウザの場所を交換し、ヒットしたページでは、サーバーにリクエストを送信している、とあなたは、ロケーションバーにある名前のページを提供するために求めている更新されます。しかし、ページがサーバー上に存在しないため、サーバーは[Not found]で応答し、正しい動作になります。

は、次の2つのオプションがあります。

1. は、サーバー側でも、ページを実装し
2. 使用クライアントのハッシュを使用してルーティングする（そのためのライブラリの多くは、たとえばhttp://projects.jga.me/routie/のために、そこにある）