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 - 您可能需要一些polyfill
• 僅在瀏覽器中工作 - 服務器不會顯示正確的結果

安裝

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

用法

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

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

  // ...
}