อ่านเกี่ยวกับ React Basic

React Router คืออะไร?#

React Router เป็นไลบรารีที่ใช้ในการจัดการการนำทาง (routing) ในแอปพลิเคชัน React โดยมันช่วยให้การจัดการเส้นทางและการเปลี่ยนหน้าในเว็บแอปทำได้ง่ายขึ้น โดยไม่ต้องโหลดหน้าใหม่ทุกครั้ง (client-side routing) ซึ่งเหมาะกับการสร้างเว็บแอปพลิเคชันแบบ Single Page Application (SPA)

ข้อดีของการใช้ React Router:#

• รองรับ Dynamic Routing: สามารถสร้างเส้นทางตามข้อมูลที่เปลี่ยนแปลงได้
• รองรับ Nested Routes: การจัดการเส้นทางซ้อนกัน
• จัดการ URL parameters และ query strings ได้ง่าย
• ทำงานแบบ Client-Side Routing ที่ไม่ต้องโหลดหน้าใหม่ทั้งหมด

การติดตั้ง React Router#

ก่อนเริ่มใช้งาน React Router คุณต้องติดตั้งแพ็กเกจ react-router-dom ผ่าน npm:

npm install react-router-dom

จากนั้นสามารถนำเข้าคอมโพเนนต์หลักของ React Router ในโปรเจกต์ของคุณ:

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

การตั้งค่าเส้นทางพื้นฐาน#

ตัวอย่างการตั้งค่าเส้นทางพื้นฐานในแอปพลิเคชัน React:

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

function Home() {
  return <h2>หน้าแรก</h2>;
}

function About() {
  return <h2>เกี่ยวกับเรา</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">หน้าแรก</Link>
        <Link to="/about">เกี่ยวกับเรา</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

อธิบาย:

• Router: ห่อคอมโพเนนต์ทั้งหมดเพื่อเปิดใช้ routing
• Routes: ใช้กำหนดชุดของเส้นทางในแอปพลิเคชัน
• Route: ใช้ในการระบุเส้นทาง เช่น / สำหรับหน้าแรก และ /about สำหรับหน้าเกี่ยวกับเรา
• Link: ใช้ในการสร้างลิงก์เพื่อเปลี่ยนเส้นทางไปยังหน้าอื่น โดยไม่ต้องโหลดหน้าใหม่

การสร้าง Nested Routes (เส้นทางซ้อน)#

Nested Routes คือการจัดการเส้นทางที่ซ้อนกัน ตัวอย่างเช่น มีหน้าแดชบอร์ดที่มีเส้นทางย่อยอยู่ภายใน:

function Dashboard() {
  return (
    <div>
      <h2>แดชบอร์ด</h2>
      <Outlet />
    </div>
  );
}

function Profile() {
  return <h3>โปรไฟล์ผู้ใช้</h3>;
}

function Settings() {
  return <h3>การตั้งค่า</h3>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/dashboard/profile">โปรไฟล์</Link>
        <Link to="/dashboard/settings">การตั้งค่า</Link>
      </nav>

      <Routes>
        <Route path="dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

อธิบาย:

• Outlet: เป็นส่วนที่ใช้แสดงคอมโพเนนต์ย่อยตามเส้นทางที่กำหนด
• ตัวอย่างนี้คือมีเส้นทางหลัก /dashboard ที่มีเส้นทางย่อย /dashboard/profile และ /dashboard/settings

การจัดการ URL Parameters#

คุณสามารถใช้ URL Parameters เพื่อส่งข้อมูล dynamic ผ่านเส้นทาง ตัวอย่างเช่น:

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

function User() {
  let { userId } = useParams();
  return <h3>โปรไฟล์ผู้ใช้หมายเลข: {userId}</h3>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/user/1">ผู้ใช้คนที่ 1</Link>
        <Link to="/user/2">ผู้ใช้คนที่ 2</Link>
      </nav>

      <Routes>
        <Route path="user/:userId" element={<User />} />
      </Routes>
    </Router>
  );
}

export default App;

อธิบาย:

• เส้นทาง user/:userId เป็นเส้นทางที่ใช้ URL Parameters เพื่อรับข้อมูลจาก URL
• สามารถใช้ useParams เพื่อดึงค่า userId จาก URL และนำไปใช้ในคอมโพเนนต์ได้

การ Redirect (เปลี่ยนเส้นทางอัตโนมัติ)#

คุณสามารถใช้ Navigate เพื่อเปลี่ยนเส้นทางไปยังหน้าอื่นโดยอัตโนมัติ เช่น:

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/old-path" element={<Navigate to="/new-path" />} />
        <Route path="/new-path" element={<NewPage />} />
      </Routes>
    </Router>
  );
}

อธิบาย:

• เมื่อผู้ใช้เข้าถึงเส้นทาง /old-path ระบบจะทำการ Redirect ไปยัง /new-path โดยอัตโนมัติ

สรุป#

• React Router เป็นไลบรารีที่ช่วยให้การจัดการเส้นทางในแอปพลิเคชัน React ง่ายขึ้น ช่วยให้สามารถสร้างเส้นทาง dynamic และ nested routes จัดการ URL parameters และทำการเปลี่ยนเส้นทางโดยไม่ต้องโหลดหน้าใหม่ทั้งหมด ทำให้การพัฒนาแอปพลิเคชัน SPA (Single Page Application) เป็นไปอย่างราบรื่นและมีประสิทธิภาพ