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

  // ...
}