next router query

next-router-query

useRouter().queryのドロップインの代替案（最初のマウントでクエリパラメーションを取得するのが最適なクエリ。

useRouter().query最初のマウントの空のオブジェクトであるという事実に悩まされたことはありますか？素晴らしい、それならこれはあなたのためのライブラリです。

違いを示す

post/[id].jsx /post/myId?key=value ：というページが与えられます。

最初にページをマウントすると、このようなものが表示されます。

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

next-router-queryを使用すると、違いが表示されます

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

最初のレンダリングが完了し、 useRouter().queryデータを返したら、代わりにそれを返すだけです。

警告

• これはイブニングハックであり、生産準備ができていません
• SSRを使用すると、水分補給エラーを引き起こす可能性があります
• URLSearchParamsに依存しています - ポリフィルが必要になる場合があります
• ブラウザでのみ動作します - サーバーは正しい結果を表示しません

インストール

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

使用法

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

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

  // ...
}