Reactjs - 反応ルーター - 文字列形式でのリンクは機能しますが、オブジェクト形式では機能しません

以下のように、react-router と Link をうまく使用しています。

  <nav>
    ...
    {sidebarCollections.map((c, i) => (
      <Link to={`/collection?id=${c.id}`} key={c.id}>
        {c.name}
      </Link>
    ))}
  </nav>

しかし、今度はリンクを通じていくつかのデータを渡す必要があります。

React Router Docs で、Link が私が必要とする状態フィールドを持つオブジェクトを代わりに取得できることを知りました。ドキュメントの例:

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

それで私は次のようにしてみます:

 <nav>
    ...
    {sidebarCollections.map((c, i) => (
     <Link
        to={{
          pathname: `/collection?id=${c.id}`,
          // state: { name: "test"}
        }}
        key={c.id}
      >
        {c.name}
      </Link>
    ))}
 </nav>

  

そこで上記のことを試してみましたが、突然レンダリングされなくなりました。状態をコメントアウトし、パス名フィールドのみを使用して、以前に作業していた文字列形式と一致させようとしましたが、どちらも無駄でした。

何が起こっているのでしょうか?また、リンクを介してデータをコンポーネントに渡すにはどうすればよいですか?マップ関数または文字列補間のせいで、何らかの問題が発生している可能性がありますか?

ありがとう

オブジェクト構文を使用する場合、クエリ パラメーターをパス名フィールド内に追加することはできません。検索フィールドとして含める必要があります。私は最終的にこれを解決策として見つけました:

   <Link
        to={{
          pathname: `/collection`,
          search: `?id=${c.id}`,
          state: { name: c.name },
        }}
        key={i}
      >
        {sc.name}
   </Link>

そして、コンポーネント内で次のコマンドを使用して状態にアクセスできます。

location.state.name