리액트 _3_이미지 클릭시 상세페이지로 이동하기

2020/05/30 - [react] - 리액트 _2_비동기방식으로 페이지 넘기기

리액트 _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에 사용한 비동기 코드를 지우면 된다.