React Router Feature Overview

เมื่อวานมีโอกาสดู คลิปสอนสร้างโปรเจคจาก React Router พบว่าเวอร์ชั่นใหม่มีอะไรให้เล่นเยอะ มันเปลี่ยนวิธีเขียนสเต็ปต่างๆใน React ค่อนข้างสะดวกขึ้น เขียน Manual น้อยลง


React Router

จากเดิมใครเขียน React คงจะทราบว่าเราใช้ React router dom ในการ Routing เปลี่ยนหน้าต่างๆเท่านั้น แต่ตอนนี้มันมีลูกเล่นเยอะมาก ผมขอสรุปสั้นๆ เป็นหัวข้อดังนี้

  • Client side routing อันนี้รู้กันอยู่แล้วเนาะ เพราะมันเกิดมาเพื่อสิ่งนี้ คือทำให้ Client สามารถเปลี่ยนหน้าได้ โดยไม่ต้องร้องขอไปที่ Server 
  • Nested route อันนี้ตามชื่อเลย ช่วยให้เราสามารถสร้าง Route เป็นรูปแบบโครงสร้าง Parent&Child  ช่วยให้ดูโค๊ดง่ายขึ้น
  • Dinamic segment ข้อนี้ช่วยให้มีความยึดหยุ่นในการใส่ params คุณจึงสามารถออกแบบ URL ได้อย่างที่ใจต้องการ
  • Rank route matching ในกรณีที่มี route ที่ต่อด้วย params และ route ที่ต้องการระบุคำ ที่เจอบ่อยๆ ตัวอย่างเช่น user/:userId และ user/new โดย React router จะทราบว่า หากคุณใส่ /new มา มันจะส่งคุณไป route ที่สอง ซึ่งอธิบายง่ายๆคือ มันฉลาด
  • Active Link บางครั้งที่คุณจะต้องเลือกปิดหรือเปิด Link ในบางสถานการณ์ React router Provide isActive และ useMatch ให้คุณเลือกใช้งานได้
  • Data Loading ตัวนี้ค่อนข้างหน้าสนใจ จากเมื่อก่อน ถ้าอยาก Fetch ข้อมูล เราจะทำใน useEffect แต่ว่า Data Loading ของ React router ช่วยให้เราสามารถ fetch ได้ตั้งแต่ตอน Navigate หรือตอนที่เรากด Link เลย พอจะเรียกใช้ข้อมูล ก็สามารถเรียกได้ผ่าน Hooks useLoaderData
  • Redirect ต่อมาจากข้อที่แล้ว เราสามารถเขียนเงื่อนไขให้มีการ Redirect ได้ตั้งแต่ตอน Navigate เช่น ใช้ในการเช็คสิทธิ์ ก่อนเข้าหน้าเพจ ซึ่งแต่ก่อนเราต้องไปเขียนเงื่อนไขตรงนี้เอาเอง แบบนี้ก็สะดวกดี
  • Pending navigate ui เราสามารถทำ Loading หากข้อมูลยังมาไม่ครบ โดยใช้ Navigate State ที่ React router provide ให้ ชื่อว่า useNavigate
  • Data mutation เราสามารถสร้าง Action โดยกำหนดที่ route ได้เลย ท่านี้มีประโยชน์มาก ถ้าหากใช้ Form เยอะๆ 
  • Error Handling ช่วย Render error element ได้เลย หากเกิดข้อผิดพลาดที่ Loader ง่าย จบ


จะเห็นว่ามี ฟีเจอร์อำนวยความสะดวกเพิ่มขึ้น จากเดิมที่ต้อง Manual เขียนเอง

สรุปเอาไว้เท่านี้นะครับ ใครอยากเห็นตัวอย่างโค๊ดที่ Imprement React router เวอร์ชั่นใหม่ ดูที่ Github นี้

Comments

Popular posts from this blog

วิธีตรวจสอบข้อมูลภาษีของตัวเอง รายได้ทั้งปี และค่าลดหย่อน จบครบที่เดียว

สูตรโกง Regex ใครไม่เก่ง Regular Expression มาทางนี้จ้า

คำถามจิตวิทยา และจริยธรรม เมื่อผมสามารถสับสวิตซ์รถไฟ และต้องเลือกชนใครสักคน

ฝากโค๊ด Online ด้วย Pastebin กันเถอะครับ !!

"yes" "yeah" "yep" เหมือนและต่างกันอย่างไร ?