next router query

next-router-query

Alternative de dépôt de useRouter().query qui essaie qu'il est préférable d'obtenir les paramètres de requête sur le premier support.

Vous êtes-vous déjà ennuyé par le fait que useRouter().query est un objet vide sur le premier mont? Super, alors c'est une bibliothèque pour vous.

Illustrer la différence

Étant donné une page appelée post/[id].jsx appelé avec /post/myId?key=value :

Vous verrez quelque chose comme ça lors du premier montage de la page:

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

Avec next-router-query vous verrez la différence

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

Une fois le premier rendu terminé et useRouter().query Renvoie les données, nous allons simplement le renvoyer à la place.

Mises en garde

• Ceci est un hack de soirée et n'est pas prêt à la production
• Peut provoquer des erreurs d'hydratation lors de l'utilisation de SSR
• S'appuie sur URLSearchParams - vous pourriez avoir besoin de polyfill
• Fonctionne uniquement dans le navigateur - le serveur ne montrera pas le bon résultat

Installer

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

Usage

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

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

  // ...
}