:) +Shallow Routing

:)4W

오늘도
배워봅니다.

시작

1. Shallow Routing

• 얕은 라우팅이라고 부른다.
• 기존 라우팅 방식은 쿼리내용이 변경되면서 리렌더링 후 해당 url로 이동 방식
• Shallow Routing은 pathname, query 값의 상태를 잃지 않고 router 객체를 통해 받을 수 있게된다.

import { useEffect } from 'react'
import { useRouter } from 'next/router'
function Page() {
  const router = useRouter()
  useEffect(() => {
  //shallow: true를 통해 사용가능!!
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])
  useEffect(() => {
  }, [router.query.counter])
}
export default Page