next js router 페이지간 query 전달하기 2가지 방법, 예시

첫번째는 url이 /user/[name] 과 같을때, name을 받는 방법이다.

name을 url query로 받을 수 있고, 이 name에 따라 동적으로 화면 구성이 가능하다.

이것을 하기 위한 예시와 폴더 구조를 적어본다.

 

import { useRouter } from "next/router";

const router = useRouter();

router.push(`/p2p/buy/${name_}`);

 

 

router 를 통해 param을 전달 가능하다.

일단 폴더 구조를 아래와 같이한다.

[ID]의 의미는 router.query를 ID로 받겠다는 의미이다.

 

ID.jsx 코드 상에서는 아래와 같이 데이터를 받아 처리한다.

const router = useRouter();

const { ID } = router.query;

 

 

두번째는 명시적으로 query를 넣어서 다른 페이지로 이동 가능하다.

pathname은 이동하고자 하는 url 경로이며,

query에 object 형식으로 값을 입력한다.

그리고 맨 아래는 이 query를 사용자가 보지 못하도록 숨기는 역할을 한다. 마스킹 역할이다.

router.push({

pathname: '/profile,

query: {

name: 'test',

point:100

},

},

'/profile'

)