쇼핑몰 상세페이지

[김선옥]

주소에 detail/1을 입력하면 해당 상세페이지가 나오는데

상품 이미지를 클릭했을 때 해당 상세페이지가 보이게 하고 싶습니다.

import React from "react";
import { Col } from "react-bootstrap";
import { Routes, Route, Link, useNavigate } from "react-router-dom";
import { useParams } from "react-router-dom";

const Card = (props) => {
  let { id } = useParams();
  console.log(id);
  return (
    
    <Col md={4}>
      <Link to="뭘써야할까요">
        console.log(id);
        < img src={"/img/" + props.product.img}></img>
      </Link>
      <h4>{props.product.title}</h4>
      <p>{props.product.content}</p>
      <p>{props.product.price}</p>
    </Col>

    
  );
};

export default Card;

 useParams를 이용해야하나 싶어서 했는데 오류가 나네요

어떻게 해야하나요?

[codingapple]

이미지 클릭하면 navigate() 실행해서 페이지 이동시킵시다

[김선옥]

선생님께서 navigate를 이용하라고 하셔서 이렇게 했는데 이게 아닌가보네요
ㅠㅠ
 
import React from "react";
import { Col } from "react-bootstrap";
import { Routes, Route, Link, useNavigate } from "react-router-dom";
import { useParams } from "react-router-dom";
const Card = (props) => {
  let navigate = useNavigate();
  let { id } = useParams();
  console.log(id); //undefined나옴
  const onClickImg = () =>{
    navigate("/detail/:id");
  }
  return (
    <Col md={4} onClick={onClickImg}>
      < img src={"/img/" + props.product.img}></img>
      <h4>{props.product.title}</h4>
      <p>{props.product.content}</p>
      <p>{props.product.price}</p>
    </Col>
  );
};
export default Card;

주소를 입력하면 잘 나옵니다만

[codingapple]

navigate("/detail/0") 합시다 :id 문법은 <Route>에서만 사용가능합니다

[김선옥]

선생님 이렇게 하면 첫번째 상품만 상세페이지에 보이잖아요
다른 상품을 클릭하면 해당 상세페이지가 보이게 하고 싶거든요

[김선옥]

선생님 이렇게 해서 연결은 했는데 이 방법은 아닌거 같아서요

const Card = (props) => {
let navigate = useNavigate();
let id = props.product.id;

  const onClickImg = () =>{
    if(id == 0) { navigate("/detail/0");}
    if(id == 1) {navigate("/detail/1");} 
    if(id == 2) {navigate("/detail/2");} 
    if(id == 3) {navigate("/detail/3");} 
    if(id == 4) {navigate("/detail/4");} 
  }

  return (
    <Col md={4} onClick={onClickImg}>
      < img src={"/img/" + props.product.img}></img>

      <h4>{props.product.title}</h4>
      <p>{props.product.content}</p>
      <p>{props.product.price}</p>
    </Col>
  );
};

[codingapple]

navigate("/detail/" + id) 하면 if문 필요없어보입니다

[김선옥]

감사합니다~~

[글쓴이]

글