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

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

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

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가 데이터를 왜 못 받은지 알고싶습니다. 그리고, 잘못된 이유도 알고싶습니다.

인프런 커뮤니티 질문&답변