Warning: Prop href did not match.(useRouter, href, query)

결론만 간단히 보고싶으신 분은 맨 아래로

 

졸업작품 팀플 진행중에 페이지간 데이터를 보내줄 필요가 있었다.

하다가 새로고침을 하면 쿼리 데이터가 사라지는것을 발견했고 이것을 해결하기 위해 Link태그에서 id를 주소창에 보이지 않도록 as를 붙였던것도 떼고 isReady를 쓰게 되었음

그래서... 

이전 페이지에서는

<Link
   href={{
       pathname: '/rvsm/iot',
       query:{patientID:patient.ID}
  }}
  as={'/rvsm/iot'}
>

이런식으로 쿼리를 넘겼다

이렇게 해주면 이동후 페이지에서

import { useRouter } from "next/router";
...

export default function PatientStatePage(){
    const router=useRouter();
	let patientID=useRef(null);
...
		useEffect(()=>{
        	if(!router.isReady){
            		return;
            	}
        	patientID=router.query.patientID;
        }
        ,[router.isReady])
...

뭐 이런식으로 쿼리 스트링을 받아오면 되는데...

실행을 해보니

이런식으로 워닝이 발생함...

이것저것 해보다가.. 서버 주소랑 클라이언트 주소가 다르잖슴? 그래서 라우터가 준비되지 않은 상태에서 어떤.. 컴포넌트들을 배치해서 그런가? 싶어서..  이동 후 표시할 컴포넌트의 return문에 컴포넌트들이 isReady가 true일때 나오도록 변경해봄

return (
        <>
            {
                router.isReady?
                <div>
                    <NavbarFour />

                    <PatientState 
                   		..(생략)
               
                    />
                    <Footer />
                </div>
                :<div>loading</div>
            
            }
            
        </>
    )

이렇게 했더니 워닝이 뜨지 않았다 

근데 워닝을 더 자세히 살펴보니

이렇게 footer의 문제인듯했음

그래서 리턴 부분을

return (
        <>
            <NavbarFour />
             <PatientState 
               
            />
                    
            {
                router.isReady?
                <div>
                   <Footer />
                </div>
                :<div>loading</div>
            }
            
            
        </>
    )

이렇게 바꿨더니 워닝 안뜸 footer에 문제가 있었다

footer파일을 보니

이런식으로 링크가 # 처리되어 있었다

링크가 어떤식으로 뜨나 페이지 띄우고 링크에 마우스 가져다 대니 위와 같이 주소 끝에 #가 붙음

그래서 다시 footer를 return문에서 워닝 날때처럼 삼항연산자 지우고 난 다음 footer파일의 #처리된 링크를 구글의 링크로 변경해보았더니 워닝이 뜨지 않았다 

 

결론

query로 페이지간 데이터 보낼때...

이유는 나도 모르겠는데 컴포넌트들 중에서 링크가 # 처리된게 있나 확인해볼것

그리고 id를 쿼리로 보내는거 말고 아래처럼 동적 라우팅으로 처리하는방식으로 바꿨더니

footer를 삼항연산자로 처리 안해줘도 워닝이 안떴다 ............. 뭐지