[error] useRoute query undefined문제

1. 상황

동적 라우팅 페이지에서 분명 주소/id가 있는데 새로고침하면 날라간다.

2. 이유

next js의 라우팅의 치명적 단점 CSR로 구성되어 있기 때문에

모든 코드를 우선 실행하는데 url의 경우 서버에서 불러오는 것이므로 url은 next js가 페이지를 불러올때 undefined로 할당되고 이후 서버에서 불러와서 할당함

그렇기 때문에 초기에 undefined가 할당이 되어있음

정적인 페이지는 문제가 없으나 axios 같이 데이터를 불러올 때는 error를 발생하게 됨

3. 해결

router.isReady

const router = useRouter()

useEffect(() => {
if(router.isReady){
const {userId} = router.query
}
},[]}

를 해주면 router가 준비가 되었을 경우 query값을 사용할 수 있다.

https://stackoverflow.com/questions/69412453/next-js-router-query-getting-undefined-on-refreshing-page-but-works-if-you-navi