[Next.js] - router & Link 를 사용해서 데이터를 전달 할 때

원인 ❓

 router.push(
        {
          pathname: `/list/categorylist`,
          query: {
            code: code,
            sort: sort,
            list: list,
          },
        },
        `/list/categorylist`
	);

router 또는 Link 태그를 사용해서 페이지 전환 시 query 옵션을 통해서 data 룰 전달 할 수 있습니다.

➡ 하지만, 배열 데이터가 정상적으로 전달이 되지 않음..

 

해결 ✅

router.push(
        {
          pathname: `/list/categorylist`,
          query: {
            code: code,
            sort: sort,
            list: JSON.stringify(list),
          },
        },
        `/list/categorylist`
      );

➡ JSON 으로 string 변환을 먼저 한 후,

 

const item = JSON.parse(list).filter((e) => e.cat_cd === code);

➡ 받아서 사용하는 곳에서 원래대로 parsing 합니다.

 

결론

data가 Object형태일 경우 string으로 변환