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 ( )

  // ...
}