React 쇼핑몰에서 상품 이미지 클릭시 상세페이지 이동 방법

[최지연]

React 쇼핑몰 메인 페이지에 있는 상품 리스트 중 하나의 이미지를 클릭했을 때 해당되는 상품 상세페이지로 가도록 하고 싶어요.

상세페이지 path를 정할 때 '/:id'를 사용했어서 Card 컴포넌트 안에 'Link to="/detail/:id"'와 같이 작성했더니 오류가 나더라구요. 

Link to 가 아닌 다른 방법으로 접근해야 하나요?

function Card(props){
  return (
    <Col md>
      <Link to="/detail/:id">
        <img src={props.programs.src}></img>
      </Link>
      <h4>{props.programs.title}</h4>
      <p>{props.programs.content}</p>
    </Col>
  )
}

 

[codingapple]

라우터 셋팅할 때 detail/:id 라고 쓰는건 :id 자리에 아무거나 집어넣으면 이 페이지 보여주세요~ 라는 뜻으로 쓰는 라우터 문법입니다 

실제로 페이지 이동 버튼을 만들거나할 때는 <Link to=”/detail/0”> 이런 식으로 실제 뭔가 입력해서 이동시켜야합니다 

[최지연]

말씀하신 대로, <Link to={}> 이런 식으로 괄호 안에 path를 직접 넣는 방식으로 작성했더니 해결되었어요. 감사합니다. 🙂

[글쓴이]

글