next router query

next-router-query

Drop-In-Alternative von useRouter().query , die es am besten versucht, die Abfrageparameter auf der ersten Halterung zu erhalten.

Haben Sie sich jemals darüber verärgert, dass useRouter().query ein leeres Objekt auf der ersten Berginie ist? Großartig, dann ist dies eine Bibliothek für Sie.

Den Unterschied veranschaulichen

Bei einer Seite mit dem Namen post/[id].jsx die mit /post/myId?key=value genannt wird:

Sie werden so etwas sehen, wenn Sie zum ersten Mal die Seite montieren:

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

Mit next-router-query werden Sie den Unterschied sehen

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

Sobald der erste Render abgeschlossen ist und useRouter().query gibt Daten zurück, werden wir dies stattdessen einfach zurückgeben.

Einschränkungen

• Dies ist ein Abendhack und ist keine Produktion bereit
• Kann bei der Verwendung von SSR Hydratationsfehler verursachen
• Stützt sich auf URLSearchParams - Sie benötigen möglicherweise etwas Polyfill
• Funktioniert nur im Browser - Server zeigt nicht das richtige Ergebnis an

Installieren

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

Verwendung

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

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

  // ...
}