クエリ文字列で日付の変更 - KDP(電子出版)のメモ　急急如律令

react-calenderのカレンダーをクリックすると日付を移動。「?day=20250201」という形のリンク先へ移動したかった。react-calenderで渡される日付がdate型だったので書き換えている。

          <Calendar
       locale="ja-JP"
       value={value}
        onClickDay={(e) => window.location.href=`?day=${(parseInt(new Date(e).toLocaleDateString('sv-SE').replaceAll('-', ''), 10))}`
        }
      />

gatsbyだとwindow.location.hrefが使えないので、navigateに書き換え。

          <Calendar
       locale="ja-JP"
       value={value}
        onClickDay={(e) => navigate(`?day=${(parseInt(new Date(e).toLocaleDateString('sv-SE').replaceAll('-', ''), 10))}`)
        }
      />

navigateにすると、ページが再描画されなかった。更新すると大丈夫だが更新する方法がない。

urlのあとに?day=20250131などを追加して読み込む日付を変える。クエリ文字列の取得 www.sandalot.com

検索結果を保存していると、親要素が書き換わっても結果が反映されない。

himenon.github.io

stateは検索結果ではなくて検索クエリを指定したほうがいいのかも。