router.push()
이전 글에서 router.push(`/movies/${id}`)
형태로 훅을 사용해 보았습니다.
router.push
hook 의 전달인자로 문자열이 아닌 객체를 넘겨줄 수 있습니다.
query params
와 path params
를 나눠주기 위해// /pages/index.js
router.push({
pathname: `movie/${id}`,
query: {
title: "potatos",
}
})
브라우저의 URL 을 마스킹할 수 있습니다.
보통 query-parmas
를 굳이 유저에게 보여줄 필요 없다고 생각할때 사용합니다.
router.push({}, url, ...)
두번째 인자인 "as" 에 url 을 문자열로 입력해 줍니다.
코드 예시
// /pages/index.js
router.push({
pathname: `movie/${id}`,
query: {
title: "potatos",
}
}, `movie/${id}`)
동작 예시 (url)
/pages/movies/[].js
파일에선 useRouter()
를 사용해서 받은 router
정보에 query parmas
정보가 그대로 있습니다.
데이터 플로우는 그대로인 상태에서 클라이언트에 보이는 url 만 마스킹된 상태
코드 예시
// /pages/index.js
...(생략)
const onClick = (id, title) => {
router.push(
{
pathname: `movies/${id}`,
query: {
title,
},
},
`movies/${id}`
);
...(생략)
// /pages/movies/[].js
import { useRouter } from "next/router";
export default function Details() {
const router = useRouter();
console.log(router);
return "detail";
}
콘솔 예시
// /pages/movie/[].js
import { useRouter } from "next/router";
export default function Details() {
const router = useRouter();
// console.log(router);
return (
<div>
<h4>{router.query.title || "Loading..."}</h4>
</div>
);
}
정상 동작
/
에서 영화 클릭하여 url 이 변경될 시 정상 동작에러 발생
/
에서가 아닌 외부 url 에서 바로 넘어올 경우 router.query.title
이 없으므로 "Loading..." 메세지가 렌더링됩니다.홈페이지에서 상세페이지로 넘어올때만 router.query.title
존재
노마드코더 NextJS 시작하기