pushStateでブラウザバックさせたい

以下のような静的なページがあった時に、

A: http://smaple.com/
B: http://smaple.com/dir1/
C: http://smaple.com/dir2/

アドレスバーを「http://smaple.com」にしたまま、dir1、dir2に遷移したいです。

history.pushStateを使って実現はできたのですが、
「A→B→C」と遷移してブラウザバックした時に、CからBに戻りたいがAに戻ってしまうため、
ブラウザバックした時に正しく遷移させる方法を知りたいです。

初心者質問で申し訳ないですがアドバイスいただけると幸いです。

追記
該当のコードになります。履歴を追加すれば戻れる・・？？と思ってたのですが

var pathname = location.pathname;
history.pushState(null,null,pathname);
history.pushState(null,null,'/');

fj68

2021/10/26 13:06

「history.replaceStateを間違って使ってしまっているのかな」と想像しますが、どのようなコードを書かれたのか不明なため、なんともいえません。コードを追加すると具体的な回答が得やすくなりますので、質問を編集してみてください。他の方からも回答を得られると思います。

c23fx

2021/10/26 13:20

すみません、コード追記させていただきました。アドレスを書き換えたいので全ページに置いてるのですが、確かにトップページの履歴が延々と追加されている・・？ということでしょうか…

行動規範の内容に同意します

回答1件

ご質問のコードだと、history.pushState(null,null,'/');によって履歴の最後に必ず/がpushされているので、ブラウザバックしたときに/にもどることになります。

また、location.pathnameが設定されているのであればhistory.pushState()を使う必要は無いように思います。
一度console.log(location.pathname);で確認されるとよいでしょう。

history.pushState()のイメージは以下のとおりです。

js
1// ブラウザの履歴スタックに '/dir1/' を push して B に遷移したことにする
2history.pushState(null, null, '/dir1/');
3// ブラウザの履歴スタックに '/dir2/' を push して C に遷移したことにする
4history.pushState(null, null, '/dir2/');
5
6// この時点でブラウザの履歴スタックは ['/dir1/', '/dir2/']
7
8// ブラウザの履歴スタックに '/' を push して A に遷移したことにする
9history.pushState(null, null, '/');
10
11// この時点でブラウザの履歴スタックは ['/dir1/', '/dir2/', '/']
12// この時点でブラウザの「戻る」を押すと、最後の履歴である '/' に遷移する