next router query

next-router-query

Drop-in Alternative useRouter().query yang mencoba yang terbaik untuk mendapatkan Params Query di mount pertama.

Pernahkah Anda merasa terganggu oleh fakta bahwa useRouter().query adalah objek kosong di dudukan pertama? Hebat, maka ini adalah perpustakaan untuk Anda.

Menggambarkan perbedaannya

Diberikan halaman yang disebut post/[id].jsx yang disebut dengan /post/myId?key=value :

Anda akan melihat sesuatu seperti ini saat pertama kali memasang halaman:

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

Dengan next-router-query Anda akan melihat perbedaannya

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

Setelah render pertama selesai dan useRouter().query mengembalikan data, kami hanya akan mengembalikannya.

Peringatan

• Ini adalah peretasan malam dan tidak siap produksi
• Mungkin menyebabkan kesalahan hidrasi saat menggunakan SSR
• Bergantung pada URLSearchParams - Anda mungkin perlu beberapa polyfill
• Hanya berfungsi di browser - server tidak akan menunjukkan hasil yang tepat

Memasang

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

Penggunaan

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

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

  // ...
}