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

  // ...
}