React Router vs React Router DOM

 

    สำหรับคนที่เคยใช้งาน Javascript Framework ที่ทำงานในฝัง Front-End Developer อาจรู้จักหรือผ่านตามาบางอย่าง React โดยตัวเจ้าตัว React นั้นว่าวิธีการนำทางระหว่างหน้าต่างๆ (พูดแบบสั้น วิธี Set Router) โดยใช้  library ที่ชื่อว่า react-router  แต่ว่า react นั้นมี package library ทั้ง react-router และ react-router-dom

React Router จำเป็นยังไง?

    React เป็น Javascript Framework โดยมีไอเดียคือการทำเว็บแอพพลิเคชั่นซิงเกอร์เพจ (single-page applications.) แต่ React นั้นไม่ได้การรวมคุณสมบัติการกำหนดการนำทางระหว่างหน้าต่างๆไว้ในตัว จำเป็นิดตั้ง package react-router เพื่อทดแทนคุณสมบัติที่หายไปนี้

React Router คืออะไร?

    React Router เป็น library มาตรฐานยอดนิยมสำหรับการกำหนดเส้นทางระหว่างส่วนประกอบมุมมองต่างๆ ในแอปพลิเคชัน React ช่วยให้อินเทอร์เฟซผู้ใช้ซิงค์กับ URL นอกจากนี้ React Router ยังอนุญาตให้กำหนดมุมมองที่จะแสดงสำหรับ URL ที่ระบุ

• react-router ประกอบด้วยฟังก์ชันหลักของ React Router รวมถึงอัลกอริธึมการจับคู่เส้นทางและ hooks

• react-router-dom: รวม react-router ไว้ในตัวและเพิ่ม DOM-specific APIs.

• react-router-native: รวม react-router ไว้ในตัวและเพิ่ม React Native-specific APIs.

React Router DOM คืออะไร?

       ฟังก์ชันหลักของ react-router-dom คือการนำการกำหนดเส้นทางแบบไดนามิกไปใช้ในเว็บแอปพลิเคชัน ตามแพลตฟอร์มและข้อกำหนดของแอปพลิเคชัน react-router-dom รองรับการ Route แบบอิงส่วนประกอบ ซึ่งเป็นโซลูชั่นในอุดมคติสำหรับการกำหนดเส้นทางหากแอปพลิเคชัน React ทำงานบนเบราว์เซอร์

ตัวอย่างการใช้งาน

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import About from './components/about';
import Home from './components/home';

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

React Router กับ React Router DOM: ความแตกต่าง 

    react-router เป็นแพ็คเกจหลักที่มีส่วนประกอบมาตรฐานและฟังก์ชันการทำงานเพื่อใช้การกำหนดเส้นทางในแอปพลิเคชัน React ในทางกลับกัน react-router-dom เป็นแพ็คเกจพิเศษที่คุณสามารถใช้ได้เฉพาะในการพัฒนาแอปพลิเคชันบนเว็บเบราว์เซอร์เท่านั้น มันส่งออก react-router เป็นการพึ่งพาและมีการเชื่อมโยง DOM (document object model) เพิ่มเติม เช่น <BrowserRouter> และ <Link>