fetchでhtmlの一部分を差し替えるも、リロードすると差し替え部分が消える。

Question

###fetchでhtmlの一部分を差し替えるも、リロードすると差し替え部分が消える。
私は脱出アドベンチャーアドベンチャーの公式サイトのようにナビゲーション部分を押すと、htmlの一部分だけが変わるという実装をしたいと思いました。

そこで私は「ナビゲーション部分にイベントハンドラを設置し、ボタンを押したら、fetchを使ってhtmlの一部分を差し替える」という方法でこれを実現しました。

しかし猿の浅知恵、これには問題がありました。
タイトル通り「リロードすると差し替え部分が消える。」のです。

これを解決するにはどうすればよいのでしょう？
元々のindex.htmlのコピーを作り、一部分だけ変え、アンカーで飛ぶというのならすでにできているのですが、エレガントでないなと思います。

一応、URLのパラメータでindex.html#～とやり、~で識別することもやってみましたが、同じindex.htmlにアンカーをはる場合、javascrpitは二度読み込まれないようで、実装できませんでした。

やはり元々のindex.htmlのコピーを作り、一部分だけ変え、アンカーで飛ぶしかないのでしょうか？

言葉だけの説明でわかりくいかと思いますが、どうかおすすめの方針などあれば、アドバイスいただけたらありがたいです・・・

Answer 1

そちらのサイト見ましたが、そのサイトは全体が更新されてますよ。

やるとすれば、DOMの更新時に、pushStateして、見た目上のURLの書き換えをします。
もちろん、書き換えたURLの実体も存在しなければならない点に注意してください。

さらに高度にやるとなると、各ページのURLにサーバー側でfallbackを設定し、クライアント側でルーティングする必要があります。（流行りのReactやらVueやらを使うと良いかもしれません。）

Comments

[hood]

回答ありがとうございます！
Reactはチュートリアルだけやったことがあり、コンポーネントを操作する感じだったので、それで挑戦してみようかな？と思いました。
pushStateやfallbackなどは知らなかったので、非常に勉強になりました。返す返す、ありがとうございました！