React Router คืออะไรใน Single Page App และใช้อย่างไรให้เป็นระบบ

Single Page App หรือ SPA คือรูปแบบเว็บแอปที่โหลดหน้า HTML หลักเพียงครั้งเดียว จากนั้นใช้ JavaScript จัดการเปลี่ยนเนื้อหาภายในหน้าจอแทนการโหลดหน้าใหม่ทั้งหน้า ผู้ใช้จึงรู้สึกเหมือนกำลังเปิดหลายหน้า เช่น /home, /about, /products แต่ความจริงแล้วยังทำงานอยู่ภายในแอปเดิม

แนวคิดนี้ทำให้การใช้งานรวดเร็วและลื่นไหลขึ้น แต่ก็เกิดคำถามสำคัญตามมาว่า ในเมื่อ browser รู้จักเพียง URL แล้ว React จะรู้ได้อย่างไรว่า URL แบบไหนควรแสดง component ใด ตรงนี้เองที่ React Router เข้ามามีบทบาทสำคัญ

React Router คืออะไร

React Router คือเครื่องมือสำหรับจัดการเส้นทางภายในแอป React โดยทำหน้าที่จับคู่ URL กับ component ที่ควรแสดงผล เปรียบได้กับแผนที่ของแอปว่า URL นี้ต้องพาไปหน้าจอไหน และ URL นั้นต้องแสดงอะไร

ตัวอย่างเช่น

• / แสดงหน้า Home
• /about แสดงหน้า About
• /contact แสดงหน้า Contact

แม้ผู้ใช้จะรู้สึกเหมือนเปลี่ยนหน้าเว็บตามปกติ แต่ React ไม่จำเป็นต้อง reload เว็บใหม่ทั้งหน้า ทำให้ประสบการณ์ใช้งานลื่นกว่าแบบดั้งเดิมมาก

ทำไม SPA จึงต้องมี Router

ปัญหาหลักของ SPA คือ browser มองเห็นเพียง URL แต่ไม่ได้รู้เองว่าในแอปควรแสดงอะไร หากไม่มี router นักพัฒนาต้องเขียน logic เองเพื่อเช็ก URL และเลือก component ที่ตรงกัน ซึ่งจะซับซ้อนขึ้นเรื่อย ๆ เมื่อแอปมีหลายหน้า

Router จึงไม่ได้เป็นแค่เมนูนำทาง แต่เป็นโครงสร้างการเดินทางของทั้งแอป ช่วยให้

• ทีมพัฒนาเห็นภาพรวมว่าแอปมีหน้าอะไรบ้าง
• ผู้ใช้ bookmark หน้าเฉพาะได้
• แชร์ลิงก์ไปยังหน้าต่าง ๆ ได้โดยตรง
• การจัดการ layout และหน้าซ้อนกันเป็นระบบมากขึ้น

โครงสร้างพื้นฐานของ React Router

การเริ่มต้นใช้งานมักเริ่มจากการใช้ BrowserRouter ครอบแอปไว้ เพื่อบอกว่าแอปนี้จะใช้ระบบ routing แบบ URL ปกติของ browser จากนั้นใช้ Routes เป็นตัวรวมเส้นทางทั้งหมด และใช้ Route เพื่อกำหนดกฎแต่ละเส้นทาง

แนวคิดหน้าตาจะประมาณนี้

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

ความหมายของแต่ละส่วนคือ

• path คือเส้นทางบน URL
• element คือ component ที่จะถูกแสดง
• เมื่อ URL ตรงกับ path ที่กำหนด React Router จะ render component นั้นทันที

การสร้างเมนูใน React Router

เวลาทำเมนูในแอป React ไม่ควรใช้ a tag แบบเดิมเสมอไป เพราะ a href มักทำให้ browser โหลดหน้าใหม่ทั้งหน้า ซึ่งขัดกับแนวคิดของ SPA

React Router จึงมี Link สำหรับใช้เปลี่ยนเส้นทางภายในแอป เช่น

<Link to="/about">About</Link>

การใช้ Link ช่วยให้ผู้ใช้รู้สึกเหมือนเปลี่ยนหน้า แต่แอปยังคงทำงานอยู่ใน SPA เดิม ข้อดีคือ

• ไม่ reload ทั้งเว็บ
• เร็วกว่า
• ลื่นไหลกว่า
• state บางอย่างในแอปไม่หายง่าย

เปลี่ยนหน้าด้วยโค้ดผ่าน useNavigate

ในหลายกรณี เราไม่ได้รอให้ผู้ใช้กดลิงก์เองเสมอไป เช่น เมื่อผู้ใช้ login สำเร็จแล้วต้องพาไปหน้า dashboard อัตโนมัติ กรณีแบบนี้ React Router มี useNavigate ให้ใช้งาน

มันคือวิธีสั่งเปลี่ยน route จากภายใน component ด้วยโค้ด ช่วยให้ควบคุม flow ของแอปได้สะดวกขึ้น เช่น

• login สำเร็จแล้วไปหน้า dashboard
• บันทึกข้อมูลเสร็จแล้วกลับหน้า list
• ตรวจสอบสิทธิ์แล้ว redirect ไปหน้าอื่น

อ่านค่าจาก URL ด้วย useParams

อีกเรื่องที่พบได้บ่อยคือ route ที่มี parameter เช่น

• /products/12

ในที่นี้ 12 คือ id ของสินค้า เราสามารถกำหนด route เป็นรูปแบบนี้ได้

<Route path="/products/:id" element={<ProductDetail />} />

จากนั้นใช้ useParams เพื่ออ่านค่า id ออกจาก URL ได้ เหมาะมากกับหน้าประเภทต่อไปนี้

• หน้ารายละเอียดสินค้า
• หน้าบทความ
• หน้าโปรไฟล์ผู้ใช้
• หน้าข้อมูลที่ต้องอ้างอิงตามรหัสเฉพาะ

Nested Routes ช่วยให้โครงสร้างแอปเป็นระเบียบ

React Router ยังรองรับ nested routes หรือเส้นทางแบบซ้อนกัน เหมาะกับหน้าที่มีโครงหลักร่วมกัน แต่เปลี่ยนเฉพาะเนื้อหาด้านใน เช่นหน้า dashboard

ตัวอย่างเช่น

• /dashboard/profile
• /dashboard/settings

แนวทางนี้ช่วยให้ layout หลักยังคงอยู่เหมือนเดิม เช่น sidebar หรือ top navigation แต่เปลี่ยนเฉพาะพื้นที่เนื้อหาด้านใน ข้อดีคือ

• ลดการเขียน layout ซ้ำ
• โค้ดอ่านง่ายขึ้น
• โครงสร้างหน้าเป็นระบบมากขึ้น

จัดการหน้าไม่พบด้วย Route path="*"

อีกส่วนที่สำคัญมากคือหน้า Not Found เพราะผู้ใช้อาจพิมพ์ URL ผิด หรือเข้าเส้นทางที่ไม่มีอยู่แล้ว หากไม่รองรับกรณีนี้ ผู้ใช้อาจเจอหน้าขาวหรือประสบการณ์ที่สับสน

React Router จึงมักกำหนด route ปิดท้ายด้วย

<Route path="*" element={<NotFound />} />

แนวทางนี้ช่วยให้เมื่อ URL ไม่ตรงกับ route ใดเลย ระบบจะแสดงหน้า NotFound พร้อมข้อความแนะนำหรือปุ่มกลับหน้าหลัก ทำให้ประสบการณ์ใช้งานดีขึ้นอย่างชัดเจน

Router ไม่ใช่แค่เมนู แต่คือโครงสร้างของแอป

หลายคนเริ่มต้นใช้งาน React Router ด้วยความคิดว่าเป็นแค่เครื่องมือทำเมนู แต่จริง ๆ แล้ว router คือแกนสำคัญของการออกแบบแอป เพราะมันกำหนดว่าผู้ใช้จะเดินทางภายในระบบอย่างไร

หากออกแบบ route ได้ชัดเจน จะช่วยทั้งฝั่งผู้พัฒนาและผู้ใช้ในหลายด้าน เช่น

• ทีมเข้าใจภาพรวมของระบบง่ายขึ้น
• แยกความรับผิดชอบของแต่ละหน้าได้ชัด
• รองรับการแชร์ลิงก์โดยตรง
• ช่วยให้ดูแลและขยายแอปในอนาคตได้ง่ายกว่าเดิม

สรุป

Single Page App ไม่ได้หมายความว่าเว็บมีเพียงหน้าเดียว แต่หมายถึงการโหลดแอปหลักครั้งเดียว แล้วเปลี่ยนมุมมองภายในด้วย JavaScript อย่างเป็นระบบ

ในโลกของ React นั้น React มีหน้าที่สร้างหน้าจอ ส่วน React Router มีหน้าที่ตัดสินใจว่า URL แบบใดควรแสดงหน้าจอไหน นอกจากนี้ยังมีเครื่องมือสำคัญที่ควรรู้จัก ได้แก่

• Link ใช้เปลี่ยนหน้าแบบไม่ reload
• useNavigate ใช้เปลี่ยนหน้าด้วยโค้ด
• useParams ใช้อ่านค่าจาก URL
• Route และ Routes ใช้กำหนดแผนที่ของแอป
• BrowserRouter ใช้เปิดระบบ routing แบบมาตรฐานของ browser

เมื่อเข้าใจชุดแนวคิดนี้แล้ว Single Page App จะไม่ใช่เรื่องสับสนอีกต่อไป แต่จะกลายเป็นเว็บหลายหน้าที่จัดการด้วย React ได้อย่างเป็นระบบ ชัดเจน และพร้อมต่อยอดในงานจริง