Link 를 써서 상품을 클릭하면 /detail/숫자 페이지로 이동?

[박준영]

라우트 상세보기 페이지 100개 강의를 듣고 /detail/:id 등을 이용해 주소창에 /detail/1, /detail/2, ... 를 수동으로 입력하면 페이지가 나타나게 만들었습니다.

근데 이제 <Card></Card>의 상품 이름이나 사진 등을 클릭하여 각 상품의 상세보기 페이지가 나타나게 하고 싶은데 <Link to=" ... " ></Link> 문법에서 detail/숫자 의 숫자 변수 문법을 어떻게 작성해야할까요?

 

시도1. 

function Card 함수에서 평범하게 props 변수 받아오듯 Link to=" ... " 안에 props. 문법작성.

<Link to="/detail/{props.product.id}" >상세보기</Link> 

>>>>>>> 실패. to=" ... " 안의 스트링이라 변수명으로서 작동 안하는듯?

 

시도2. 

a 태그 이용해서 비슷하게 작성시도,

<a href="/detail/{props.product.id} ... 

>> 마찬가지로 실패

 

시도3. 

map(a,i) 코드 부분에서,

<Card></Card>를 <Link to 로 감싸보기.

<Link to="/detail/{i}"><Card> ... </Card><Link>

>> 실패

 

반복문처럼 /detail/{숫자} 가 알아서 바뀌길 바라는데 어떻게 해야할까요... 너무 멍청해서 검색을 어떤 키워드로 해야할지도 모르고 아무 시도나 막 해봤는데 역시나 잘 안되네요.

 

[codingapple]

그럴 땐 그냥 navigate() 쓰는게 편합니다 

[박준영]

/detail 뒤의 map(a,i) 반복문의 숫자 변수 i 같은걸 어떻게 받아오나요? 검색해보니 $ 붙여서 문자열을 쓰는 것도 같은데 정확한 방법을 모르겠네요.

onClick={() => {
props._navigate('/detail/${props.key}')
}}

???

onClick={() => {
props._navigate('/detail/{props.key}')
}}

???

onClick={() => {
props._navigate('/detail/' + {props.key})
}}

???

 

이렇게 시도했는데 전부 안되네요

[박준영]

해결했습니다.

{ } 없이 쓰고, props 로 key={i} 가 아닌 _i={i} 를 가져오니 되네요.

props._navigate('/detail/' + props._i)

[codingapple]

자식컴포넌트에서 useNavigate() 쓰면 props.navigate로 전송해줄 필요 없습니다

[글쓴이]

글