สอนทำ Client-Side Routing ด้วย React Router v7 สำหรับมือใหม่

ทำความรู้จัก Client-Side Routing และทำไมต้องใช้ React Router

เวลาเราเข้าเว็บไซต์ทั่วไป พอเรากดเปลี่ยนหน้า เว็บจะทำการโหลดข้อมูลใหม่ทั้งหน้าจากเซิร์ฟเวอร์ (คอมพิวเตอร์แม่ข่ายที่เก็บข้อมูลเว็บ) ซึ่งทำให้เกิดอาการกระพริบหรือรอโหลดนาน Client-Side Routing (การเปลี่ยนหน้าเว็บโดยไม่ต้องโหลดใหม่จากเซิร์ฟเวอร์) เข้ามาแก้ปัญหานี้โดยการสลับเนื้อหาเฉพาะส่วนที่เปลี่ยนไปแทน

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

สำหรับการพัฒนาเว็บในยุคปัจจุบัน การใช้ React Router v7 ช่วยให้แอปพลิเคชันของเราทำงานได้ลื่นไหลเหมือนแอปมือถือ มือใหม่ที่กำลังฝึกเขียนโค้ดควรเรียนรู้เรื่องนี้ไว้ เพราะเป็นหัวใจสำคัญของการสร้าง Single Page Application (เว็บที่โหลดหน้าแรกครั้งเดียวแล้วทำงานต่อได้เลยโดยไม่ต้องรีเฟรชหน้า) ที่บริษัทส่วนใหญ่ต้องการตัว

ติดตั้งและเตรียมพร้อมใช้งาน React Router

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

ให้รันคำสั่งด้านล่างนี้เพื่อติดตั้ง react-router-dom ซึ่งเป็นแพ็กเกจหลักที่เราต้องใช้ในงานฝั่งหน้าบ้านครับ

# ติดตั้ง React Router ผ่าน npm
npm install react-router-dom

หลังจากติดตั้งเสร็จแล้ว ให้เช็กที่ไฟล์ package.json (ไฟล์เก็บข้อมูลการตั้งค่าและรายการเครื่องมือเสริมของโปรเจกต์) ว่ามี react-router-dom ปรากฏอยู่ในส่วนของ dependencies (รายการเครื่องมือที่จำเป็นต้องใช้ในการรันโปรแกรม) หรือยัง ถ้ามีแล้วถือว่าพร้อมไปต่อครับ

การตั้งค่า BrowserRouter, Routes และ Route

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

เราจะใช้ BrowserRouter ครอบทั้งแอปไว้ ตามด้วย Routes เพื่อรวมกลุ่มเส้นทาง และใช้ Route เพื่อกำหนดว่า URL ไหนจะให้แสดงผลเป็นส่วนประกอบ (Component) อะไร

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

ในตัวอย่างนี้ path="/" คือหน้าหลัก ส่วน path="/about" คือหน้าเกี่ยวกับเรา เมื่อผู้ใช้เปลี่ยน URL ตัว Routes จะคอยตรวจดูว่ามันตรงกับ Route ไหน แล้วดึงไฟล์นั้นมาแสดงแทนที่ทันทีครับ

สร้างทางเชื่อมด้วย Link และ NavLink

เมื่อเราทำเส้นทางไว้แล้ว เราก็ต้องทำปุ่มให้ผู้ใช้กดเปลี่ยนหน้าได้ ถ้าเราใช้แท็ก <a> แบบปกติ เว็บจะรีเฟรชหน้าใหม่ซึ่งผิดจุดประสงค์ของเรา ดังนั้นเราต้องใช้ Link หรือ NavLink แทน

Link ทำหน้าที่เหมือนลิงก์ปกติแต่ไม่โหลดหน้าใหม่ ส่วน NavLink จะพิเศษกว่าตรงที่มันรู้ว่าตอนนี้เราอยู่ที่หน้าไหน ทำให้เราใส่สไตล์เน้นย้ำให้ปุ่มนั้นดูเด่นขึ้นได้อัตโนมัติ

import { Link, NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">หน้าหลัก</Link>
      <NavLink to="/about" style={({ isActive }) => ({ color: isActive ? 'red' : 'black' })}>
        เกี่ยวกับเรา
      </NavLink>
    </nav>
  );
}

ข้อควรระวัง คือมือใหม่มักเผลอใช้ <a href="..."> แทน <Link to="..."> ซึ่งจะทำให้ประสิทธิภาพของเว็บลดลงและเสียจังหวะการทำงานของ React ไปทันทีครับ

สรุป: นำไปใช้งานจริงในโปรเจกต์ของคุณ

การทำ Routing เป็นก้าวแรกที่สำคัญมากในการเปลี่ยนจาก "หน้าเว็บหน้าเดียว" ให้กลายเป็น "แอปพลิเคชัน" ที่มีหลายหน้าและใช้งานได้จริง ลองนึกภาพว่าคุณกำลังสร้าง Portfolio (แฟ้มสะสมผลงาน) ของตัวเอง คุณควรมีหน้าหลัก หน้าแสดงผลงาน และหน้าติดต่อเรา

ขั้นตอนการทำจริงคือ:

1. ติดตั้ง react-router-dom ลงในโปรเจกต์
2. กำหนด BrowserRouter ที่ไฟล์หลักของแอป
3. สร้างระบบนำทางด้วย NavLink เพื่อให้ผู้ใช้กดเปลี่ยนหน้าได้ง่าย
4. กำหนด Route ให้ครบทุกหน้าที่คุณต้องการสร้าง

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