Router3. 강의 숙제에 Detail.js 에서의 오류

[Eden]

선생님이 코딩한것을 적용해보았을때 .title에서 콘솔로 확인 해도 undefined으로 출력이 됩니다.

강의 하신 것 그대로 해보았는데 안되는데 이것저것 해봐도 이유를 모르겠네요.

라우터는 App.js 에서

 <Route path="/detail/:id">
        <Detail shoes={shoes}/>
 </Route>

이렇게 작성 되어 있습니다.

Detail.js 는  아래와 같습니다

import React from 'react';
import { useHistory, useParams } from 'react-router-dom';

function Detail(props){

    let {id} = useParams();

    let findProduct = props.shoes.find(function(product){
         return product.id === id
     });
     console.log(findProduct);

    let backBtn = useHistory();

    return(
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <img src= "https://codingapple1.github.io/shop/shoes1.jpg" 
                         width="100%"
                         alt="img"/>
                </div>
                <div className="col-md-6 mt-4">
                    <h4 className="pt-5">{findProduct.title}</h4>
                    <p>{findProduct.content}</p>
                    <p>{findProduct.price}</p>
                    <button className="btn btn-danger">CheckOut</button>
                    <button className="btn btn-danger" onClick={()=>{backBtn.push('/')}}>Back</button>
                </div>
            </div>
        </div>
    )
}

export default Detail;

 

 

그리고 혹시 전체코드를 볼수 있는 깃허브가 있나요?

[codingapple]

1. /detail/0 이런 경로로 잘 접속하셨나요

2. 그럼 id 라는 변수는 0으로 잘 출력되나요

3. props.shoes도 잘 출력되나요 

이것만 확인하면 될듯요 따로 올려놓은건 없습니다 

[글쓴이]

글