ブラウザの戻るボタンで画面更新するための覚え書き

2021/12/09に公開

SPA(Single Page Application)なWebアプリを作る際に、画面が変わったときに戻るボタンでは戻れません。
戻るボタンを有効にするには history API を使う必要があります。

単にブラウザのアドレス欄を書き換えるだけなら第一引数は空欄でも良かったので、ちょっとわかりにくかったのですが、下記のように第一引数にオブジェクトを指定する必要があります。

window.history.pushState({ url: url }, '', url); 
window.addEventListener('popstate', function () {
	// console.log(window.history.state);
	const url = window.history.state.url;
});

Discussion