• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

next link에 관련된 질문입니다.

20.05.05 00:44 작성 조회수 77

0

제로초님 강의 항상 잘 보고있습니다.

제로초님의 강의를 들으면서 제 스스로 공부를 하고있는데,

onDetail 는 onClick에 사용되어지고 있습니다. onClick={onDetail} <- 이렇게 되어있습니다

const onDetail = () => {
    console.log(`onDetail id => ${id}`);
    return Router.push({ pathname: `/detail`, query: { movieId : parseInt(id) }}, `/detail/movie/${parseInt(id)}`);
  };

위와 같은 형식으로 Router.push를 만들어 놓고 query로 데이터 전송을 할려고합니다. 전송할 페이지는 detail 입니다.

예로들면 id의 234이라는 숫자가 있습니다.  id를 movieId라는 변수에 담고 데이터를 전달할려고 합니다.

(위에 id는 값은 정상적으로 움직입니다.  ) 

그리고, pages/details에서 넘겨준 데이터(movieId )를 받을려고 합니다.

import React from 'react';

const Detail = ({ movieId }) => {
  console.log(`movieId = ${movieId}`);
  

  return (
    <div>
      Detail
    </div>
  );
};

export default Detail;


위와 같이 console.log를 찍어보면 undefined가 나옵니다.

분명히 query로 전달하였고, query의 이름명이 movieId이고, 데이터 전달 받는 쪽도 movieId인데 

Detail의 페이지에서 movieId가 데이터를 왜 못 받은지 알고싶습니다. 그리고, 잘못된 이유도 알고싶습니다.

course-thumbnail

React로 NodeBird SNS 만들기

답변 1

답변을 작성해보세요.

1

조현영님의 프로필

조현영

지식공유자

2020.05.05

props로 받고계신 것 같은데요. query는 props에 들어있지 않습니다. query는 getInitialProps를 통해서 들어옵니다. Detail에도 getInitialProps가 필요합니다. 제 강좌 다른 페이지들의 getIntialProps 참고하시면 될듯합니다.

이 글과 비슷한 Q&A