next router query

next-router-query

DROP-In useRouter().query 의 대안은 첫 번째 마운트에서 쿼리 매개 변수를 가져 오는 것이 가장 좋습니다.

useRouter().query 첫 번째 마운트의 빈 개체라는 사실에 짜증을 낸 적이 있습니까? 좋아, 그렇다면 이것은 당신을위한 도서관입니다.

차이를 설명합니다

/post/myId?key=value 로 호출되는 post/[id].jsx 라는 페이지가 주어지면

페이지를 처음 장착 할 때 다음과 같은 것을 볼 수 있습니다.

 useRouter ( ) . query // result: {} // ? 

next-router-query 사용하면 차이가 보입니다

 -- -- -- -- - Render # 1  -- -- -- --
useRouter ( ) . query result: { } // ? 
useRouterQuery ( ) result: { id : 'myId' , key : 'value' } // ?

첫 번째 렌더가 완료되고 useRouter().query 데이터를 반환하면 간단히 반환합니다.

경고

• 이것은 저녁 해킹이며 생산 준비가 아닙니다.
• SSR을 사용할 때 수화 오류가 발생할 수 있습니다
• URLSearchParams 에 의존하므로 PolyFill이 필요할 수 있습니다
• 브라우저에서만 작동합니다 - 서버는 올바른 결과를 표시하지 않습니다.

설치하다

yarn add next-router-query
# or 
npm i next-router-query

용법

 import { useRouterQuery } from 'next-router-query' ;

export function MyPage ( ) {
  const routerQuery = useRouterQuery ( )

  // ...
}