next router query

next-router-query

Alternativa de entrega de useRouter().query que intenta que sea mejor obtener los parámetros de consulta en el primer soporte.

¿Alguna vez se ha molestado por el hecho de que useRouter().query es un objeto vacío en el primer soporte? Genial, entonces esta es una biblioteca para ti.

Ilustrando la diferencia

Dada una página llamada post/[id].jsx que se llama con /post/myId?key=value :

Verá algo como esto cuando monte por primera vez la página:

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

Con next-router-query verás la diferencia

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

Una vez que se realice el primer render y useRouter().query devuelve datos, simplemente lo devolveremos.

Advertencias

• Este es un truco nocturno y no está listo para la producción.
• Podría causar errores de hidratación al usar SSR
• Confía en URLSearchParams : es posible que necesite un poco de polyfill
• Solo funciona en el navegador: el servidor no mostrará el resultado correcto

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 ( )

  // ...
}