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 นี้