【React-router】useLocation 直アクセスした場合に親コンポーネントから取得したstateがnullになる

Question

前提

reactアプリをSPAで構築しています。

1.アイテム一覧ページ
2.アイテムそれぞれにリンクを設定し、それぞれにstateでアイテムidやアイテムの名前などを渡す。リンク先は詳細ページ。

と言う構造でページを構成しています。

遷移先ページでuselocsationを使った際、そのstateの値を取得できるのですが、
遷移先ページのurlで再読み込みをするとそのstateがnullになります。(urlなどは取れています)
1.一覧ページであらかじめデータを所得してきているので、そこにアクセスせずに直に2に行っているからデータがない、と言うことなのかなと考えています。

この場合は取得する方法はないものなのでしょうか？
詳細ページのuselocationで、URLは取得できているので、そのURLのidを元に再度データをapiサーバーから取得することもできますが、
方法としてこうするのかないのかな？と言うところがわからずにいます。

よろしくお願いいたします。

実現したいこと

アイテムの詳細ページに直アクセスした際に、uselocationのstateの値を取得したい

発生している問題・エラーメッセージ

{
  "pathname": "/items/74",
  "search": "",
  "hash": "",
  "state": null,
  "key": "default"
}

上記のように、uselocationで取得したデータの中のstateがnullとなる。
直にアクセスせず、まず1の一覧ページにアクセしてから遷移した場合はnullではなく、取得したデータ(item.titleやitem.idなど)が存在しています。

該当のソースコード

一覧ページの該当箇所

 <ul className="items_wrap">
    {
       items.map((item)=>(
           <li>
              <Link to={"/items/" + item.id} state={item}>
                <Item
                  key={item.id}
                  id={item.id}
                  title={item.title}
                />
              </Link>
           </li>
       ))
    }  
</ul>

詳細ページのuselocationの箇所

 let location = useLocation();
    console.log(location)

補足情報（FW/ツールのバージョンなど）

"react": "^18.1.0",
"react-router-dom": "^6.3.0",
"typescript": "^4.7.2",

Answer 1

おっしゃる通りコンポーネントが知らない情報はAPIに問い合わせるしかないんじゃないでしょうか

Comments

[ink88882]

ご回答ありがとうございます！
やはり仕組み上、その方法で行うしかなさそうなのですね。。！
そちらの方法にて対応していきます！