ทำไมต้องใช้ React TypeScript Typed Routing
เวลาเราสร้างเว็บด้วย React เรามักจะใช้ React Router เพื่อเปลี่ยนหน้าไปมาเหมือนกับการกดเปลี่ยนช่องทีวี ถ้าโปรเจกต์เรามีแค่ 2-3 หน้า เราอาจจะจำชื่อเส้นทาง (Path) ได้แม่น แต่ถ้าโปรเจกต์ใหญ่ขึ้นเรื่อยๆ การพิมพ์ชื่อเส้นทางผิดแค่ตัวเดียวจะทำให้เว็บพังทันที
การใช้ TypeScript (ภาษาที่ช่วยเช็คความถูกต้องของข้อมูลก่อนรันโปรแกรม) เข้ามาช่วยทำ Typed Routing จะช่วยเปลี่ยนชื่อเส้นทางที่เคยเป็นแค่ข้อความธรรมดา ให้กลายเป็นชุดคำสั่งที่คอมพิวเตอร์ตรวจสอบได้ ถ้าเราพิมพ์ชื่อหน้าเว็บผิด โปรแกรมจะฟ้องเตือนทันทีตั้งแต่ตอนเขียนโค้ด ไม่ต้องไปไล่หาบั๊ก (จุดผิดพลาดในโปรแกรม) ตอนรันจริง
ลองนึกภาพว่าเรากำลังสั่งอาหาร ถ้าเราจดเมนูด้วยลายมือที่อ่านไม่ออก พนักงานก็ทำอาหารมาผิด แต่ถ้าเราใช้ระบบกดปุ่มเลือกเมนูที่ล็อกไว้แล้ว โอกาสผิดพลาดก็เป็นศูนย์ Typed Routing คือการสร้างปุ่มเหล่านั้นให้กับการเดินทางในเว็บของเรา ทำให้การพัฒนาซอฟต์แวร์ปลอดภัยและรวดเร็วขึ้นมาก
ติดตั้ง React Router v7 ให้พร้อมใช้งาน
ขั้นตอนแรกเราต้องติดตั้งเครื่องมือลงในเครื่องก่อน โดยปกติเราจะใช้ Terminal (โปรแกรมพิมพ์คำสั่งสั่งคอมพิวเตอร์) ในการทำงาน ให้เปิดโปรแกรมนี้ขึ้นมาในโฟลเดอร์โปรเจกต์ของเรา แล้วพิมพ์คำสั่งเพื่อดึงไฟล์ไลบรารี (ชุดคำสั่งสำเร็จรูป) เข้ามาในเครื่อง
การติดตั้ง React Router v7 ทำได้ง่ายมากผ่านคำสั่ง npm ซึ่งเป็นเครื่องมือจัดการแพ็กเกจ (ส่วนประกอบเสริมที่คนอื่นเขียนไว้ให้เราใช้) ที่มาพร้อมกับ Node.js อยู่แล้ว คำสั่งนี้จะเข้าไปดาวน์โหลดไฟล์ที่จำเป็นและอัปเดตไฟล์คอนฟิก (ไฟล์ตั้งค่าโปรแกรม) ให้เราโดยอัตโนมัติ
หลังจากติดตั้งเสร็จ ให้สังเกตที่ไฟล์ package.json (ไฟล์บันทึกรายชื่อเครื่องมือในโปรเจกต์) ว่ามีชื่อ react-router-dom ปรากฏอยู่หรือไม่ ถ้ามีแสดงว่าเราพร้อมเข้าสู่ขั้นตอนการตั้งค่าเส้นทางแล้วครับ
# ติดตั้ง React Router เวอร์ชันล่าสุด
npm install react-router-dom
# ติดตั้งตัวช่วย TypeScript ให้กับ Router
npm install -D @types/react-router-domคำสั่งแรกเป็นการติดตั้งตัวหลัก ส่วนคำสั่งที่สองที่มี -D คือการติดตั้งไฟล์ Type Definitions (ไฟล์นิยามโครงสร้างข้อมูลสำหรับ TypeScript) เพื่อให้ตัวช่วยเขียนโค้ดของเราเข้าใจว่าคำสั่งแต่ละตัวต้องใช้ข้อมูลแบบไหนบ้าง
สร้างโครงสร้าง Routes แบบปลอดภัย
แทนที่เราจะเขียนชื่อเส้นทางเป็นข้อความตรงๆ ในโค้ด เราควรสร้าง Object (กลุ่มข้อมูลที่เก็บเป็นคู่ชื่อกับค่า) ขึ้นมาเพื่อเก็บเส้นทางทั้งหมดไว้ในที่เดียว วิธีนี้ช่วยให้เราแก้ไขชื่อเส้นทางได้ในจุดเดียวและมีผลกับทั้งโปรเจกต์
การทำแบบนี้ช่วยป้องกันปัญหา "พิมพ์ผิด" ได้ดีเยี่ยม เพราะเราจะเรียกใช้ผ่านชื่อตัวแปรแทนการพิมพ์ข้อความเอง ถ้าเราพิมพ์ชื่อตัวแปรผิด TypeScript จะขีดเส้นใต้สีแดงเตือนเราทันทีว่าไม่มีตัวแปรนี้อยู่จริง ทำให้เราแก้ไขได้ก่อนที่ลูกค้าจะเห็นหน้าเว็บที่พัง
ลองดูตัวอย่างการสร้างไฟล์ routes.ts เพื่อเก็บเส้นทางทั้งหมด นี่คือจุดเริ่มต้นของการสร้างระบบ Type-safe (ระบบที่ตรวจสอบชนิดข้อมูลเข้มงวด) ที่ดีสำหรับโปรเจกต์ขนาดกลางถึงใหญ่ครับ
// สร้างชุดข้อมูลเส้นทางไว้ในที่เดียว
export const ROUTES = {
HOME: "/",
PROFILE: "/profile",
SETTINGS: "/settings",
} as const; // ทำให้ข้อมูลนี้แก้ไขไม่ได้และตรวจสอบได้แม่นยำโค้ดด้านบนคือการสร้างตัวแปร ROUTES ที่เก็บเส้นทางเอาไว้ การใช้ as const จะช่วยให้ TypeScript มองว่าค่าเหล่านี้เป็นค่าคงที่ที่เปลี่ยนไม่ได้ ช่วยให้การอ้างอิงชื่อหน้าเว็บมีความแม่นยำสูงสุด
การตั้งค่า Router Provider
Router Provider คือตัวควบคุมหลักที่จะคอยฟังว่าตอนนี้ผู้ใช้กำลังอยู่ที่หน้าไหน แล้วเอาเนื้อหาหน้านั้นมาแสดงผลแทนที่เนื้อหาเก่า มันทำหน้าที่เหมือนผู้กำกับเวทีที่คอยเปลี่ยนฉากให้ทันเวลาตามบทที่ได้รับมา
เราต้องเอา RouterProvider ไปครอบส่วนประกอบหลักของแอปพลิเคชัน เพื่อให้ทุกหน้าในเว็บเข้าถึงระบบการเปลี่ยนหน้าได้โดยตรง การตั้งค่านี้มักจะทำในไฟล์ main.tsx หรือไฟล์เริ่มต้นของโปรเจกต์เรา
จุดที่มือใหม่มักพลาดคือการลืมนำเข้า (Import) ไฟล์เส้นทางเข้ามาเชื่อมต่อ หรือลืมใส่เครื่องหมายวงเล็บให้ถูกต้อง ทำให้ตัว Router ทำงานไม่สมบูรณ์ ลองดูการนำไปใช้งานจริงด้านล่างนี้ได้เลยครับ
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { ROUTES } from "./routes";
// กำหนดว่าแต่ละเส้นทางจะแสดงหน้าไหน
const router = createBrowserRouter([
{ path: ROUTES.HOME, element: <HomePage /> },
{ path: ROUTES.PROFILE, element: <ProfilePage /> }
]);
// นำ Router ไปใส่ครอบแอปหลัก
export default function App() {
return <RouterProvider router={router} />;
}โค้ดส่วนนี้เป็นการสร้าง Router Instance (ตัวอย่างการทำงานของ Router) ขึ้นมา โดยดึงค่าจาก ROUTES ที่เราทำไว้ก่อนหน้านี้ ทำให้มั่นใจได้ว่าเส้นทางในแอปเราจะตรงกันเสมอ
การนำไปใช้งานจริงและการเปลี่ยนหน้า
เมื่อเราตั้งค่าทุกอย่างเสร็จแล้ว เวลาต้องการเปลี่ยนหน้า เราจะไม่ใช้การพิมพ์ URL เอง แต่จะใช้ตัวช่วยที่ชื่อว่า Link หรือ useNavigate แทน เพื่อให้ระบบตรวจสอบความถูกต้องทำงานได้อย่างเต็มประสิทธิภาพ
การใช้ Link ช่วยให้การเปลี่ยนหน้าเร็วขึ้นเพราะไม่ต้องโหลดหน้าใหม่ทั้งหมดเหมือนการกดรีเฟรช และยังเป็นการย้ำว่าเรากำลังเดินทางไปยังเส้นทางที่ถูกต้องตามที่ประกาศไว้ใน ROUTES ของเรา
หากเราต้องการไปหน้าโปรไฟล์ เราก็แค่เรียกใช้ ROUTES.PROFILE แทนการพิมพ์ "/profile" ตรงๆ หากวันหนึ่งเราเปลี่ยนชื่อเส้นทางจาก /profile เป็น /user-profile เราก็แค่แก้ในไฟล์ routes.ts ที่เดียว โปรเจกต์ทั้งหมดก็จะอัปเดตตามทันที
import { Link } from "react-router-dom";
import { ROUTES } from "./routes";
// ตัวอย่างการทำปุ่มเปลี่ยนหน้า
function Navbar() {
return (
<nav>
<Link to={ROUTES.HOME}>หน้าแรก</Link>
<Link to={ROUTES.PROFILE}>โปรไฟล์</Link>
</nav>
);
}เห็นไหมครับว่ามันสะดวกแค่ไหน การเขียนโค้ดแบบนี้ช่วยลดโอกาสเกิดบั๊กจากการพิมพ์ชื่อเส้นทางผิดพลาด และทำให้ทีมงานคนอื่นที่มาอ่านโค้ดต่อเข้าใจได้ทันทีว่าแต่ละปุ่มพาไปที่ไหน
สรุป: เปลี่ยนโปรเจกต์ให้เป็นมืออาชีพ
การตั้งค่า Typed Routing อาจดูเหมือนต้องเสียเวลาเพิ่มในช่วงแรก แต่ถ้ามองในระยะยาว นี่คือการลงทุนที่คุ้มค่ามาก เพราะมันช่วยลดเวลาในการไล่หาบั๊กที่เกิดจากการพิมพ์ผิด และทำให้โค้ดของเราดูเป็นระบบระเบียบมากขึ้น
สมมติว่าคุณกำลังทำเว็บขายของออนไลน์ ถ้าคุณไม่ทำ Type-safe ไว้ แล้ววันหนึ่งคุณเปลี่ยนชื่อหน้าตะกร้าสินค้า แต่ลืมแก้ลิงก์ในหน้าอื่น เว็บคุณจะขึ้นหน้า 404 (หน้าเว็บไม่พบ) ทันที ซึ่งส่งผลเสียต่อความเชื่อมั่นของลูกค้าอย่างมาก
จงฝึกใช้ TypeScript ให้เป็นนิสัย ตั้งแต่โปรเจกต์แรกๆ เพราะสิ่งนี้คือมาตรฐานที่โปรแกรมเมอร์มืออาชีพทั่วโลกใช้กัน การทำโครงสร้างให้แข็งแรงตั้งแต่ต้นจะทำให้คุณก้าวเข้าสู่การเป็นโปรแกรมเมอร์ที่เขียนโค้ดได้อย่างมั่นใจและมีคุณภาพครับ
