react
리액트 _3_이미지 클릭시 상세페이지로 이동하기
새내기개발자
2020. 5. 30. 14:05
2020/05/30 - [react] - 리액트 _2_비동기방식으로 페이지 넘기기
이 포스팅 이어서 작성합니다.
1. NavLink를 임포트 해준다.
import {NavLink} from "react-router-dom";
2. Recipe.js에서 이미지를 누르면 링크로 이동할 수 있도록 img 태그를 NavLink태그로 싸준다.
const html = recipe.map((m)=>
<div className="col-md-4">
<div className="thumbnail">
<NavLink to={"/recipe_detail/"+m.no}>
<img src={m.poster} alt="Lights" style={{"width":"100%"}}/>
</NavLink>
<div className="caption">
<p style={{"fontSize":"9pt"}}>{m.title}</p>
<sub style={{"color":"gray"}}>{m.chef}</sub>
</div>
</div>
</div>)
3. RecipeDetail.js 에서 props를 파라메터로 받아주어야 값이 넘어간다.
일단 번호가 제대로 넘어가는지 보기위해서 제목 옆에 번호를 띄워보았다.
import React from "react";
export default function RecipeDetail(props) {
return(
<div><h1>레시피상세보기:{props.match.params.no}</h1></div>
// return 위에 const {match}=props;를 적고
match.params.no 라고 해도된다
)
}
이렇게 출력이 된다. 만약에 출력이 안된다면 새로고침을 눌러보자.
그림클릭했을때 바로 뜨게 하려면 Recipe.js에서 useEffect에 사용한 비동기 코드를 지우면 된다.
반응형