1.useRouter란?
next js에서 routing을 하게 해주는 hook
why? useRouter
동적라우팅을 쉽게 해주어서 자기가 알아서 페이지를 할당해 보여줌
사용법
import {useRouter} from 'next/router'
const router = useRouter();
const {data} = useQuery(FETCH_BOARD, {
variables: { boardID: router.query.boardID }.
});
function onClick() {
router.push(`/boards/${router.query.boardID}/edit`)
가. useRouter를 import 해주고
나. router라는 이름으로 변수를 만들어 할당해주고
다. useQuery를 이용해 불러온 variables의 boardID에 router.query.boardID로 할당해주고
라. 함수내에서 사용한다
우선 graphql로 불러온 createBoard라는 것은 입력값을 넣어주고 제출하기를 하였을 경우 mutation을 요청하고 서버로부터 전달받은 게시글의 _id
정보를 뱉어냄(다른 정보들도 있음)
이후 그 정보들을 result라는 변수에 담아서 저장을 해두고 result.data.createdBoard._id
로 조회를 할 수 있음.
그렇게 되면 ${result.data.createBoard._id}
는 _id
를 의미하게 되므로
router.push(/boards/_id
)가 되어 결국은 _id
를 가진 주소로 router를 이용해서 push(이동)해주세요 라는 뜻이 됨
단 /boards에 []로 만들어진 폴더가 있어야 됨