useRouter()

적자생존·2022년 3월 27일
0

router

목록 보기
1/3

1.useRouter란?
next js에서 routing을 하게 해주는 hook

  1. why? useRouter
    동적라우팅을 쉽게 해주어서 자기가 알아서 페이지를 할당해 보여줌

  2. 사용법

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로 할당해주고
라. 함수내에서 사용한다

  1. 내용

우선 graphql로 불러온 createBoard라는 것은 입력값을 넣어주고 제출하기를 하였을 경우 mutation을 요청하고 서버로부터 전달받은 게시글의 _id 정보를 뱉어냄(다른 정보들도 있음)
이후 그 정보들을 result라는 변수에 담아서 저장을 해두고 result.data.createdBoard._id로 조회를 할 수 있음.
그렇게 되면 ${result.data.createBoard._id}_id를 의미하게 되므로
router.push(/boards/_id)가 되어 결국은 _id를 가진 주소로 router를 이용해서 push(이동)해주세요 라는 뜻이 됨
단 /boards에 []로 만들어진 폴더가 있어야 됨

profile
적는 자만이 생존한다.

0개의 댓글