สอนทำ Dynamic Routing ใน React ด้วย useParams, Query Parameters และ useNavigate

ทำไมเว็บเราต้องมีระบบนำทางแบบยืดหยุ่น

เวลาเราสร้างเว็บแอปพลิเคชันด้วย React (ไลบรารีสำหรับสร้างหน้าจอเว็บ) เรามักจะเจอสถานการณ์ที่หน้าตาเว็บเหมือนเดิม แต่ข้อมูลเปลี่ยนไปตามสิ่งที่ผู้ใช้เลือก เช่น หน้าโปรไฟล์ของเพื่อนแต่ละคนที่มีหน้าตาเหมือนกันเป๊ะ แต่แสดงชื่อและรูปไม่เหมือนกัน

ถ้าเราต้องสร้างไฟล์หน้าเว็บแยกกันทุกครั้งที่มีข้อมูลใหม่ งานเราจะหนักมากและจัดการยากสุด ๆ Dynamic Routing (การเปลี่ยนเส้นทางหน้าเว็บโดยอ้างอิงข้อมูล) จึงเข้ามาแก้ปัญหานี้ โดยการใช้เส้นทางเดียวแต่เปลี่ยนรายละเอียดข้างในตามค่าที่ส่งมา

ลองนึกภาพเหมือนห้องสมุดครับ แทนที่จะจ้างคนไปยืนเฝ้าทุกชั้นหนังสือ เราแค่มีป้ายบอกทางที่เปลี่ยนหมายเลขได้ตามความต้องการ ถ้าอยากไปชั้นไหนก็แค่เปลี่ยนเลขบนป้าย ระบบของเราก็จะพาไปหาข้อมูลชุดนั้นทันทีโดยไม่ต้องสร้างห้องสมุดใหม่ทั้งหลัง

ใช้ useParams เพื่อดึงข้อมูลจาก URL

URL Parameters (ข้อมูลที่เป็นตัวแปรอยู่ในที่อยู่เว็บไซต์) คือการฝากค่าไว้บนลิงก์ เช่น /user/1 หรือ /product/abc ตัวเลขหรือตัวอักษรหลังเครื่องหมายทับ คือค่าที่เราเอาไปใช้ค้นหาข้อมูลต่อได้

ใน React เราจะใช้ฟังก์ชันที่ชื่อว่า useParams (คำสั่งดึงค่าตัวแปรจากที่อยู่เว็บ) เพื่อหยิบค่าเหล่านั้นออกมาใช้งานในโค้ดของเราได้ง่าย ๆ เพียงแค่ประกาศตัวแปรให้ตรงกับชื่อที่เราตั้งไว้ในตอนกำหนดเส้นทาง

มือใหม่มักลืมตั้งชื่อตัวแปรให้ตรงกันระหว่างตัวกำหนดเส้นทางกับตัวดึงค่า ทำให้ค่าที่ได้ออกมาเป็น undefined (ค่าที่ไม่มีอยู่จริง) ซึ่งจะทำให้โปรแกรมทำงานผิดพลาดทันทีครับ

// ตัวอย่างการกำหนดเส้นทางใน App.js
<Route path="/product/:id" element={<ProductDetail />} />

// ตัวอย่างการดึงค่าใน ProductDetail.js
import { useParams } from 'react-router-dom';

function ProductDetail() {
  const { id } = useParams(); // ดึงค่า id ออกมาจาก URL
  return <h1>กำลังดูสินค้าชิ้นที่: {id}</h1>;
}

โค้ดด้านบนแสดงวิธีดึงค่า id ออกมาใช้ ถ้าเราเข้าเว็บ /product/123 หน้าจอจะแสดงข้อความว่า "กำลังดูสินค้าชิ้นที่: 123" ทันที โดยที่คอมโพเนนต์ ProductDetail ทำหน้าที่เพียงแค่แสดงผลตามค่าที่รับมา

การใช้ Query Parameters เพื่อกรองข้อมูล

Query Parameters (ข้อมูลเสริมที่ต่อท้าย URL หลังเครื่องหมายคำถาม) ใช้สำหรับส่งค่าที่ไม่ได้เป็นส่วนหนึ่งของโครงสร้างหลัก เช่น การค้นหาหรือการเรียงลำดับข้อมูลในหน้าเว็บ เช่น /search?keyword=react

การดึงค่าเหล่านี้เราจะใช้ useSearchParams (คำสั่งดึงค่าข้อมูลเสริมจากที่อยู่เว็บ) ซึ่งจะให้ผลลัพธ์ออกมาเป็นเหมือนตารางเก็บข้อมูลที่คุณสามารถเรียกใช้คำสั่ง get เพื่อดูค่าที่ผู้ใช้พิมพ์ค้นหาเข้ามาได้

ข้อควรระวังคือค่าที่ได้จาก URL จะเป็นข้อความเสมอ ถ้าคุณคาดหวังจะเป็นตัวเลข ต้องอย่าลืมแปลงค่า (เปลี่ยนชนิดข้อมูล) ให้เป็นตัวเลขก่อนนำไปคำนวณหรือใช้เปรียบเทียบในโปรแกรม

import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get("keyword"); // ดึงค่าหลัง keyword=

  return <p>ผลการค้นหาสำหรับ: {query}</p>;
}

เมื่อผู้ใช้เข้าเว็บ /search?keyword=javascript ตัวแปร query จะมีค่าเป็น "javascript" ทันที ทำให้เราสามารถนำค่านี้ไปใช้เรียกข้อมูลจากฐานข้อมูลเพื่อแสดงผลลัพธ์ที่ถูกต้องให้ผู้ใช้เห็นได้

การเปลี่ยนหน้าด้วย Programmatic Navigation

ปกติการเปลี่ยนหน้าเราใช้ <Link> (ปุ่มกดเปลี่ยนหน้า) แต่บางครั้งเราต้องเปลี่ยนหน้าเองผ่านโค้ด เช่น หลังจากกดปุ่มล็อกอินสำเร็จแล้วให้เด้งไปหน้าแรก หรือกดปุ่มชำระเงินแล้วไปหน้าสรุปรายการ

เราจะใช้ฟังก์ชันที่ชื่อว่า useNavigate (คำสั่งเปลี่ยนหน้าโดยใช้โค้ดสั่ง) ซึ่งเปรียบเสมือนรีโมทคอนโทรลที่ช่วยให้เราสั่งให้เบราว์เซอร์เปลี่ยนเส้นทางไปตามที่ต้องการได้ทุกเมื่อที่เกิดเหตุการณ์บางอย่างขึ้น

จุดที่มือใหม่ชอบพลาดคือการเรียก useNavigate นอกส่วนประกอบหลัก หรือเรียกผิดจังหวะ ทำให้โปรแกรมค้างหรือทำงานไม่ตรงจุด ให้จำไว้ว่าต้องเรียกใช้ภายในฟังก์ชันคอมโพเนนต์เท่านั้นครับ

import { useNavigate } from 'react-router-dom';

function LoginButton() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // ทำงานล็อกอินเสร็จแล้ว...
    navigate('/dashboard'); // สั่งให้ย้ายหน้าไปที่ /dashboard
  };

  return <button onClick={handleLogin}>เข้าสู่ระบบ</button>;
}

โค้ดตัวอย่างนี้แสดงการเปลี่ยนหน้าหลังจากที่ผู้ใช้คลิกปุ่ม handleLogin จะทำงานก่อน แล้วตามด้วย navigate('/dashboard') เพื่อพาผู้ใช้ไปยังหน้าถัดไปทันที เป็นวิธีที่ใช้บ่อยมากในระบบจัดการสมาชิก

ข้อควรระวังและแนวปฏิบัติที่ดี

การจัดการ URL ใน React ถ้าทำไม่ดีจะทำให้เว็บทำงานช้าหรือบั๊ก (ข้อผิดพลาดในโปรแกรม) ได้ง่ายมาก สิ่งสำคัญคือต้องจัดการสถานะของ URL ให้สัมพันธ์กับข้อมูลในหน้าเว็บเสมอ อย่าให้ค่าใน URL กับค่าในหน้าจอแสดงผลไม่ตรงกัน

ถ้าคุณกำลังสร้างโปรเจกต์ใหญ่ การแยกส่วนการจัดการเส้นทางไว้ที่ไฟล์เดียวจะช่วยให้บำรุงรักษา (การดูแลและแก้ไขโค้ด) ทำได้ง่ายขึ้นในระยะยาว อย่าเขียนโค้ดเปลี่ยนหน้ากระจัดกระจายไปทั่วทุกไฟล์จนหาไม่เจอ

จำไว้เสมอว่า URL คือหัวใจของเว็บ ผู้ใช้ควรสามารถกดปุ่มย้อนกลับหรือคัดลอกลิงก์ไปวางต่อได้ ดังนั้นการใช้ useParams หรือ useSearchParams จึงดีกว่าการเก็บค่าไว้ในหน่วยความจำชั่วคราวเพียงอย่างเดียว

สรุป: เอาไปใช้จริงในงานโปรแกรมเมอร์

การเข้าใจเรื่อง useParams, useSearchParams และ useNavigate คือก้าวสำคัญที่เปลี่ยนจากคนเขียนเว็บหน้าเดียวเป็นคนทำเว็บแอปพลิเคชันที่สมบูรณ์แบบ คุณสามารถเอาความรู้นี้ไปสร้างระบบจัดการข้อมูลที่คุณต้องการได้เลย

ตัวอย่างเช่น ถ้าคุณกำลังทำโปรเจกต์ Portfolio (แฟ้มสะสมผลงาน) คุณสามารถใช้ useParams เพื่อทำหน้าแสดงรายละเอียดโปรเจกต์แต่ละชิ้น โดยใช้ลิงก์ /project/:id เพียงหน้าเดียว แต่แสดงผลลัพธ์ต่างกันตาม ID ที่คลิกเข้ามาได้ทันที

การฝึกเขียนให้คล่องคือหัวใจ ลองเริ่มจากสร้างโปรเจกต์เล็ก ๆ ที่มีการเปลี่ยนหน้าไปมาและมีการส่งค่าผ่าน URL ดูครับ ยิ่งคุณเจอบั๊กจากการทำระบบนำทางมากเท่าไหร่ คุณจะยิ่งเก่งและเข้าใจธรรมชาติของ React ได้ลึกซึ้งมากขึ้นเท่านั้น