next router query

next-router-query

Alternativa de queda de useRouter().query que é melhor que é melhor obter os parâmetros de consulta na primeira montagem.

Você já ficou irritado com o fato de que useRouter().query ser um objeto vazio na primeira montagem? Ótimo, esta é uma biblioteca para você.

Ilustrando a diferença

Dada uma página chamada post/[id].jsx que é chamado com /post/myId?key=value :

Você verá algo assim quando montar pela primeira vez a página:

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

Com next-router-query você verá a diferença

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

Uma vez que a primeira renderização seja concluída e useRouter().query retorna dados, simplesmente retornaremos isso.

Advertências

• Este é um hack da noite e não está pronto para a produção
• Pode causar erros de hidratação ao usar o SSR
• Depende de URLSearchParams - você pode precisar de um pouco de poli
• Funciona apenas no navegador - o servidor não mostrará o resultado certo

Instalar

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

Uso

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

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

  // ...
}