next/router | Next.js

next/router

useRouter

• router 오브젝트를 꺼내서 사용할 수 있다.

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = {
    marginRight: 10,
    color: router.asPath === href ? 'red' : 'black',
  }

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

export default ActiveLink

router object에 들어있는 것들

• query 프로퍼티는 pre-render때는 empty일 수가 있다.
• query : It will be an empty object during prerendering if the page doesn't use Server-side Rendering . Defaults to {}
• • isReady: boolean - Whether the router fields are updated client-side and ready for use. Should only be used inside of useEffect methods and not for conditionally rendering on the server. See related docs for use case with automatically statically optimized pages
  • isReady가 true일때 query가 값이들어있다고 판단할 수 있다.

const router = useRouter();

useEffect(())=>{
	if(router.isReady){ // router가 준비 되었을때
	console.log(router.query)
}

}, [router.query])

• 클라이언트 사이드에서 router.query가 처음랜더 될때는 빈 객체로 나온다 { } 추가로 isReady : false
• 그다음 렌더될때 객체에 query값이 들어가있고, isReady : true 가 된다.

<aside> 💡 router 객체에는 여러가지 있다.

</aside>

router.push() : history가 쌓이는 이동

router.push(url, as, { scroll : true})

• {scroll : true }가 기본값…