Open2023/01/18にコメント追加1

ReactでブラウザのURLをrerender無しで更新する

JavaScript

React

TypeScript

kenfdev

画面のタブの切り替えをしたとき、URLでそれを同期しておきたいときがある（ブックマークだったり、再読み込みしたときに復元できるように）。

Next.jsを使っていると例えば router.push を {shallow: true} して更新できるような気もしますが、基本的に状態が変わってしまう影響でrerenderしてしまう。これが意図していれば良いのですが、まったくもってrerenderすらしたくないときもある。

そういうときは以下のように window.history.replaceState が使えます。題名に「React」とつけてますがただのJavaScriptなのでどこででも使える方法です。これはReactとは関係の無い世界なのでrerenderも走りません。

// valueはクエリパラメータに設定したい値
const value = 'some-param-value'

const url = new URL(window.location.href);
const searchParams = url.searchParams;
searchParams.set('someparam', value);

url.search = searchParams.toString();
const newUrl = url.toString();
window.history.replaceState(
  { ...window.history.state, as: newUrl, url: newUrl },
  undefined,
  newUrl
);

ソースはこちら。

window.history..replaceState