react-routerでnavigateする時、stateはどこに保存されているの？

結論

window.historyのstate

前提

react-routerはなんとなくで使えてしまうので、一応確認したという程度のメモ書きです。
react-router公式のメインコンセプトによると、HistoryはURLの変更をsubscribeできるようにするオブジェクトで、ブラウザのhistoryをプログラム的に操作するAPIも提供していると記載があります。

History - An object that allows React Router to subscribe to changes in the URL as well as providing APIs to manipulate the browser history stack programmatically.

また、LocationはWEB APIのwindow.locationを基にしているという記載もあります。

Location - This is a React Router specific object that is based on the built-in browser's window.location object. It represents "where the user is at". It's mostly an object representation of the URL but has a bit more to it than that.

このコンセプトを見る限り、ブラウザ標準APIを利用してURLの変更を検知→描画するDOMを変更するライブラリということが分かります。

実際にstateを渡して遷移してみる

メインコンセプトの時点で大方検討はついていますが、実際にconsole.log()で確認してみます。

stateを渡す起点となるページ

const MockPage2 = (props: Props) => {
    const navigate = useNavigate()
    const navigateWithState = () => navigate('/mock', {state: {id : 99}})
  return (
    <>
      <Typography>MockPage2</Typography>
      <Button onClick={navigateWithState}>react-routerでstateを渡して遷移</Button>
    </>
  )
}

stateを貰うページ

const MockPage = (props: Props) => {
    const location = useLocation()
    const state = location.state as {id : number}
    console.log(window.history)
    console.log(window.location)
  return (
    <>
      <Typography>MockPage</Typography>
      <Typography>{state.id}</Typography>
    </>
  )
}

遷移する前

遷移後

Window.locationには何も入っていない

window.historyのプロパティstateに保存されており、react-routerのuseLocationはwindow.historyのstateを便利に取得してくれているようです。

ちなみにsessionStorageやlocalStorageにも保存はされないです。

参考