วิธีใช้ React Router V6: คู่มือสำหรับผู้เริ่มต้น

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

React Router เวอร์ชัน 6 ใช้การปรับเปลี่ยนที่สำคัญในอัลกอริธึมการกำหนดเส้นทางเพื่อแก้ไขข้อบกพร่องที่มีอยู่ในซอฟต์แวร์ซ้ำครั้งก่อน และส่งมอบระบบการจัดการเส้นทางขั้นสูงและมีประสิทธิภาพมากขึ้น

เริ่มต้นใช้งานการกำหนดเส้นทางโดยใช้ React Router V6

ในการเริ่มต้นกระบวนการ คุณสามารถสร้างแอปพลิเคชัน React หรือกำหนดค่าโปรเจ็กต์ React โดยใช้ Vite เป็นเซิร์ฟเวอร์การพัฒนาของคุณได้ เมื่อสร้างโปรเจ็กต์แล้ว ให้ดำเนินการแนะนำไลบรารี react-router-dom ภายในการขึ้นต่อกันของโปรเจ็กต์

 npm install react-router-dom 

การสร้างเส้นทางโดยใช้ React Router

การห่อหุ้มแอปพลิเคชันทั้งหมดภายในส่วนประกอบ BrowserRouter เป็นวิธีที่มีประสิทธิภาพในการสร้างเส้นทาง เพื่อให้บรรลุเป้าหมายนี้ โปรดอัปเดตไฟล์ JavaScript ที่เกี่ยวข้อง เช่น index.jsx หรือ main.jsx ด้วยการรวมการแก้ไขที่แนะนำ คุณจะได้สร้างรากฐานสำหรับการกำหนดเส้นทางภายในแอปพลิเคชันของคุณได้สำเร็จ

 import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <App/>
    </Router>
  </React.StrictMode>,
)

การใช้ BrowserRouter wrapper รอบๆ ส่วนประกอบของแอปพลิเคชันทำให้สามารถเข้าถึงฟังก์ชันการกำหนดเส้นทางและความสามารถที่ได้รับจากไลบรารี React Router ได้อย่างสมบูรณ์ ครอบคลุมแอปพลิเคชันทั้งหมด

การใช้ส่วนประกอบเส้นทาง

เมื่อแอปพลิเคชันของคุณถูกรวมเข้ากับส่วนประกอบ BrowserRouter แล้ว คุณสามารถวิเคราะห์การกำหนดค่าการกำหนดเส้นทางได้

ส่วนประกอบ Routes แสดงถึงความก้าวหน้าที่สำคัญเหนือส่วนประกอบ Switch รุ่นก่อน ในแง่ของฟังก์ชันการทำงานภายใน React Router ส่วนประกอบนี้ให้การสนับสนุนการกำหนดเส้นทางแบบสัมพันธ์ ช่วยให้สามารถเปลี่ยนระหว่างส่วนต่างๆ ของแอปพลิเคชันได้อย่างราบรื่น นอกจากนี้ยังมีฟีเจอร์การจัดอันดับเส้นทางอัตโนมัติ เพื่อให้มั่นใจว่าผู้ใช้จะถูกนำทางไปยังเนื้อหาที่เกี่ยวข้องมากที่สุดตามประวัติการนำทางของพวกเขา นอกจากนี้ยังสามารถจัดการเส้นทางที่ซ้อนกันได้ ช่วยให้นักพัฒนาสามารถสร้างลำดับชั้นที่ซับซ้อนของเพจได้อย่างง่ายดาย

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

โปรดเปิดไฟล์ “App.jsx” ที่อยู่ในไดเร็กทอรีโปรเจ็กต์ของคุณ และแทนที่โค้ด React เริ่มต้นที่พบในนั้นด้วยเทมเพลตที่ให้ไว้ด้านล่าง:

 import './App.css'
import { Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import About from './pages/About';

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

export default App 

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

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

ในโฟลเดอร์ซอร์ส ให้สร้างส่วนไดเร็กทอรีใหม่ชื่อ"เพจ"จากนั้นรวมไฟล์ใหม่สองไฟล์ชื่อ"Dashboard.jsx"และ"About.jsx"ใช้ไฟล์เหล่านี้เพื่อทดลองกับเส้นทางต่างๆ

ใช้ createBrowserRouter เพื่อกำหนดเส้นทาง

เอกสารประกอบของ React Router แนะนำให้ใช้ส่วนประกอบ createBrowserRouter เพื่อกำหนดการกำหนดค่าเส้นทางสำหรับเว็บแอปพลิเคชัน React ส่วนประกอบนี้เป็นทางเลือกที่ไม่ซับซ้อนสำหรับ BrowserRouter ซึ่งใช้อาร์เรย์ของเส้นทางเป็นอาร์กิวเมนต์

การรวมองค์ประกอบนี้ช่วยลดข้อกำหนดสำหรับการกำหนดเส้นทางภายในส่วนประกอบแอป เป็นไปได้ที่จะสร้างการกำหนดค่าเส้นทางทั้งหมดในไฟล์ index.jsx หรือ main.jsx แทน

แน่นอนว่า นี่คือการตีความคำสั่งดังกล่าวอย่างละเอียด:scssตัวอย่างเช่น ให้เราพิจารณาสถานการณ์ที่มีการใช้องค์ประกอบนี้:

 import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from './App.jsx'
import Dashboard from './pages/Dashboard';
import About from './pages/About';


const router = createBrowserRouter([
  {
    path: "/",
    element: <App/>,
  },
  {
    path: "/dashboard",
    element: <Dashboard/>,
  },
  {
    path: "/about",
    element: <About/>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
); 

การใช้ส่วนประกอบ createBrowserRouter และ RouterProvider ช่วยอำนวยความสะดวกในการสร้างโครงสร้างพื้นฐานการกำหนดเส้นทางภายในแอปพลิเคชันที่ใช้ React โดยใช้ประโยชน์จากความสามารถในการนำทางผู้ใช้อย่างมีประสิทธิภาพตลอดทั้งหน้าหรือฟังก์ชันการทำงานต่างๆ ที่เชื่อมต่อถึงกันของโปรแกรม

ในการนำไปใช้โดยเฉพาะนี้ มีความแตกต่างจากวิธีการทั่วไปโดยที่ส่วนประกอบ BrowserRouter จะห่อหุ้มแอปพลิเคชันทั้งหมด แต่ส่วนประกอบ RouterProvider จะถูกนำมาใช้เพื่อถ่ายทอดบริบทของเราเตอร์ไปยังทุกส่วนประกอบภายในซอฟต์แวร์โดยอาศัยความรอบคอบ

การใช้เส้นทางที่ไม่พบหน้า

การทำงานของ prop path ภายในบริบทของส่วนประกอบ Route ของ React Router นั้นอยู่ที่ความสามารถในการทำการเปรียบเทียบระหว่างพาธที่ระบุกับ URL ปัจจุบัน โดยมีเป้าหมายสูงสุดในการพิจารณาว่าพวกมันสอดคล้องกันเพื่อการนำทางที่ประสบความสำเร็จหรือไม่ ที่จะเกิดขึ้น

เพื่อจัดการกับอินสแตนซ์เมื่อไม่มีเส้นทางที่ตรงกัน คุณสามารถสร้างเส้นทางที่กำหนดซึ่งจัดการข้อผิดพลาด “404 Page Not Found” โดยเฉพาะ การรวมเส้นทางดังกล่าวจะเป็นไปได้สำหรับผู้ใช้ปลายทางที่จะได้รับคำตอบที่เข้าใจได้ในสถานการณ์ที่พวกเขาพยายามเข้าถึง URL ที่ไม่ถูกต้อง

หากต้องการรวมเส้นทาง 404 ไว้ในแอปพลิเคชัน คุณต้องรวมไว้ใน RouteComponent ดังนี้:

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

 // using createBrowserRouter
{ path: "*", element: <NotFound />, }, 

เราจะสร้างส่วนประกอบ NotFound แบบกำหนดเองที่ขยาย NotFoundRouteComponent ในตัวของ React จากนั้นเราจะใช้ส่วนประกอบนี้เพื่อแสดงผลเมื่อไม่พบหน้าที่ร้องขอบนเซิร์ฟเวอร์ เพื่อให้บรรลุเป้าหมายนี้ ก่อนอื่นเราต้องติดตั้ง Axios เพื่อสร้างคำขอ API และจัดรูปแบบส่วนประกอบของเราด้วยโมดูล CSS สุดท้ายนี้ เราจะนำเข้าและใช้แพ็คเกจเหล่านี้ในโค้ดของเรา

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

การนำทางแบบเป็นโปรแกรมโดยใช้ useNavigate Hook

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

อันที่จริงเราต้องจัดหาตะขอ useNavigate จากแพ็คเกจ React Router ที่ได้รับความนิยมเพื่ออำนวยความสะดวกในการดำเนินการนำทางผ่านการใช้งานส่วนประกอบฟังก์ชัน About.jsx

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

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

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

  const handleButtonClick = () => {
    navigate("/");
  };

  return (
    <>//Rest of the code ...
      <button onClick={handleButtonClick}>
    </>
  );
}

export default About; 

สิ่งสำคัญที่ควรทราบก็คือ แม้ว่า hook useNavigate และ hook useNavigation ซึ่งทั้งสองอย่างนี้ถูกนำมาใช้ใน React Router เวอร์ชัน 6 ก็มีหลักการตั้งชื่อที่คล้ายกัน แต่ก็มีฟังก์ชันและวัตถุประสงค์ที่แตกต่างกัน

การใช้ฮุก useNavigation ช่วยให้สามารถเข้าถึงข้อมูลที่เกี่ยวข้องกับการนำทาง รวมถึงสถานะการนำทางในปัจจุบันและรายละเอียดเพิ่มเติมต่างๆ ฟังก์ชันดังกล่าวจะเป็นประโยชน์ในการเรนเดอร์ส่วนประกอบอินเทอร์เฟซผู้ใช้ เช่น ตัวบ่งชี้การโหลด ซึ่งนำเสนอการแสดงภาพการดำเนินงานที่กำลังดำเนินอยู่

แน่นอนว่า นี่คือการตีความตัวอย่างที่ให้มาอย่างละเอียดซึ่งสาธิตการใช้งานตะขอ useNavigation:

 import { useNavigation } from "react-router-dom";

function SubmitButton() {
  const navigation = useNavigation();

  const buttonText =
    navigation.state === "submitting"
      ? "Saving..."
      : navigation.state === "loading"
        ? "Saved!"
        : "Go";

  return <button type="submit">{buttonText}</button>;
} 

ข้อมูลโค้ดที่ให้มาสาธิตองค์ประกอบการทำงานของ React ที่เรียกว่า"SubmitButton"ซึ่งใช้ Hook แบบกำหนดเอง"useNavigation"เพื่อรับสถานะการนำทางปัจจุบัน ซึ่งช่วยให้สามารถอัปเดตป้ายกำกับของปุ่มแบบไดนามิกเพื่อตอบสนองต่อการเปลี่ยนแปลงในการโต้ตอบของผู้ใช้กับแอปพลิเคชัน

แม้จะมีฟังก์ชันที่แตกต่างกัน แต่ก็เป็นไปได้ที่จะใช้ทั้งตะขอ"useNavigate"และ"useNavigation"ควบคู่กัน แบบแรกทำหน้าที่เป็นกลไกการเริ่มต้นสำหรับกระบวนการนำทาง ในขณะที่แบบหลังให้การเข้าถึงข้อมูลการนำทางแบบสดซึ่งกำหนดประเภทของคำติชมอินเทอร์เฟซผู้ใช้ที่จะแสดงภายในสภาพแวดล้อมของเบราว์เซอร์

การใช้ useRoutes Hook

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

แน่นอนว่านี่เป็นภาพประกอบที่สวยงามซึ่งแสดงให้เห็นถึงการใช้ยูทิลิตี้นี้:

 import { useRoutes } from 'react-router-dom';
import Dashboard from './Dashboard';
import About from './About';

const routes = [
  {
    path: '/',
    element: <Dashboard/>,
  },
  {
    path: '/about',
    element: <About />,
  },
];

function App() {
  const routeResult = useRoutes(routes);
  return routeResult;
}

export default App; 

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

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

การจัดการการกำหนดเส้นทางในแอปพลิเคชัน React

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