ReactのECサイトで商品一覧ページから商品詳細ページへのリンクをうまく作りたい。

Question

reactでECサイトのポートフォリオを作成しています。
商品一覧ページで商品名をクリックしたら商品詳細ページに飛ぶようにしようと考えています。
以下のように実装したところ商品詳細ページに飛んだ時にエラーが出てしまいます。
コンソールログで確認したところpropsの形で渡したdocがうまく読み込めていないようです。
どのようにすればリンク先にpropsを渡すことができるでしょうか？

import React,{useState} from "react";
import {Link} from "react-router-dom";
import PageButton from "./PageButton";

export default function GameInfo(props){
  const [count, setCount] = useState(0);
  return(
    <div>
      <ul>
        <div className="game-container">
        {props.gameDoc.slice(count*10, count*10+10).map((doc, index) =>
          <li className="game-image" key={index} style={{marginBottom:"30px", display:"flex"}}>
            <img src={doc.photo} alt="not image" height="220px" width="330px"/>
            <div className="game-info" style={{marginLeft:"30px"}}>
              {/*ここのリンクについて質問*/}
              <Link to="/Detail" game={doc}><h1>{doc.name}</h1></Link>
              <p>price: ¥{doc.price}</p>
            </div>
          </li>)
        }
        </div>
      </ul>
      <PageButton gameDoc={props.gameDoc} count={count} setCount={setCount}/>
    </div>
  )
}

リンク先のページ(Detail)のコンソールログでprops.gameがundefinedとなっているためpropsで渡したdocがうまく読み込めていないと考えております。

import React from "react";
import {Button} from "@material-ui/core"; 

function Detail(props) {
  console.log(props.game);
  return (
    <div>
      <img src={props.game.photo} alt="not image" />
      <h1>{props.game.name}</h1>
      <p>{props.game.detail}</p>
      <p>{props.game.category}</p>
      <p>{props.game.price}</p>
    </div>
  );
}
export default Detail;

Comments

[hoshi-takanori]

Link タグには game={doc} などの余分なものは追加できないので、to={"/Detail/" + doc.id} みたいにする必要があるかと。

[human9]

なるほどです。現在データベースに6９個の商品を保存してあるのですが、この場合69個分Detail/doc.idのページを作成する必要があるということですか？

[hoshi-takanori]

<Route path="/Detail/:id"> みたいに書けば id を受け取れるはず。
https://qiita.com/10mi8o/items/67d5479da6dcc9c4e697#url%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF

[human9]

ありがとうございます！
試してみてみます。

Answer 1

親コンポーネントが質問文に載っていないので断定できかねるのですが、
親から子へのpropsの値を取得してないのでは？

docも親から子へ経由されている変数ならば、子コンポーネントGameinfo内のdocはprops.docになるはずです。

なので、子から孫コンポーネントDetailへ値を渡す際にも未定義のままのdocを受け渡そうとしているのでエラーになっていると思います。

Comments

[human9]

回答ありがとうございます。
親のコンポーネントは以下のようになっています。
```react
import React,{useState, useEffect} from "react";
import Container from "./Container";
import "firebase/firestore";
import {db} from "../base";

function Home(props) {
var docRef = db.collection("games");
const [game, setGame] = useState([]);
let gameArray = [];

useEffect(() => {
//カテゴリーが指定されていない時の表示
if(props.category == null){
docRef.get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
gameArray.push(doc.data());
});
return gameArray
}).then((gameArray) => {
setGame(gameArray);
}).catch((error) => {
console.log("Error getting document:", error);
});
};
},[])
console.log(game);

return (
<div>
<GameInfo title={"TOP"} gameDoc={game}/>
</div>
);
}
```
GameInfo.jsでは親コンポーネントから渡されているのはgameDoc配列だけです。この配列にmapメソッドをかけた時のローカル変数がdocとなっています。
mapメソッド内でdocを使っているので問題ないと思っているのですがどうでしょうか？

[FKM]

確かにそうですね、だとすると親コンポーネントのgameにはきちんと値が入ってきているのでしょうか？

[human9]

親コンポーネントのgameと子コンポーネントのgameDocに値が入ってきていることはコンソールログで確認済みです。
また、以下のように詳細ページへのリンクをコメントアウトしてDetailコンポーネントを直接置いた場合は情報を渡せるので自分のLinkの使い方自体に問題があると考えています。
``` GameInfo
return(
<div>
<ul>
<div className="game-container">
{props.gameDoc.slice(count*10, count*10+10).map((doc, index) =>
<li className="game-image" key={index} style={{marginBottom:"30px", display:"flex"}}>
<img src={doc.photo} alt="not image" height="220px" width="330px"/>
<div className="game-info" style={{marginLeft:"30px"}}>
{/* <Link exact to="/detail/:docId" game={doc}><h1>{doc.name}</h1></Link> */}
<Detail game={doc} />
<p>price: ¥{doc.price}</p>
</div>
</li>)
}
</div>
</ul>
```

[FKM]

https://qiita.com/h-yoshikawa44/items/aa78b6c7cd1ef43549bf
を読む限り、link toの場合は通常のコンポーネントのようなコールバック受け渡しではなくて、パラメータを渡していく方法を使うようですね。

[human9]

かなり参考になりました。任意のパラメータとしてdoc.nameを渡してやればできそうですね。
試してみます！

[human9]

できました！情報提供本当にありがとうございました！