ajax에서 디테일 페이지에 관한 질문입니다.

[서나현]

선생님과 배웠던걸 혼자 응용해보고 있는데 상품이미지를 클릭했을 때 디테일 페이지로 이동하게끔 만들기는 성공했고 디테일 페이지 안의 제품내용을 원하는 내용으로 변경하는 것도 성공했습니다

그런데 디테일 페이지 안의 이미지를 원하는 파일로 넣고 싶은데 그부분에서 막혔습니다ㅠㅠ 현재 필요이미지는 public 폴더에 저장되어 있는 상태이고 상품을 클릭하면 그 클릭한 id를 받아와서 다른 정보는 다 그 제품에 맞게 뜨는데 이미지는 어렵네요ㅠㅠ 도움 부탁드립니다

[codingapple]

../shoes말고 /shoes라고 해봅시다 

[서나현]

 /shoes라고 해도 이미지가 안들어오네요ㅠㅠ 

혹시 import 해야하는 부분이 더 있을까요?

[서나현]

이미지 src쪽에 props.i가 아니고 id를 넣으니까 이미지는 나오는데 각 클릭한 이미지가 아니라 첫번째 이미지만 고정되서 나옵니다

혹시나 싶어서 찾은상품.id라고 넣어도 계속 첫번째 이미지만 출력이 되는데 각 클릭한 컨텐츠의 id 번호를 알려주는게 id 변수로 저장한 useParams 아니었나요? 어떻게 하면 각 클릭한 컨텐츠에 맞는 이미지가 디테일 페이지에 나올 수 있는지 궁금합니다 

[codingapple]

let {id} 저건 현재주소의 /detail/ 뒤에 입력한 문자를 의미합니다 

2번상품 클릭시 /detail/2로 잘 이동하는지

id가 2가 맞는지 콘솔창에 출력해봅시다 

[서나현]

아 현재 어떤 제품을 클릭해도 /detail/1 로 뜨네요ㅠㅠㅠㅠ 

이부분을 클릭한 제품의 숫자로 id부분을 변경해줘야 하는데 그러려면 app.js에서 <Route path="/detail/:id"> 여기 부분의 id를 수정해야 하는 건가요?

[codingapple]

네 0번 상품 누르면 /detail/0 으로 이동하라고 코드짜놓으면 됩니다 

history.push('/detail/0') 이런거 쓰면 됩니다 

[서나현]

지금 제 app.js파일에 Card 쪽에 링크 걸어둔 부분이 to="/detail/0"라고 되어 있어서 계속 첫번째만 뜨는거 같습니다 이부분에 0 대신 어떤 함수를 넣어서 클릭하는 거에 대한 숫자로 바뀌도록 할 수 있을까요?

[서나현]

아 아닙니다!! 스스로 성공했습니다ㅠㅠㅠㅠㅠ 도움 주셔서 감사했습니다!!!

[글쓴이]

글