เริ่มต้นใช้งาน React Routing

การกำหนดเส้นทางเป็นส่วนสำคัญในการสร้างแอปพลิเคชันหน้าเดียว (SPA) ด้วย React การใช้แท็กเส้นทางแทนแท็ก Anchor (‹a›‹/a›) สามารถเพิ่มประสิทธิภาพเว็บไซต์ได้อย่างมาก เนื่องจาก Routes จะแสดงเฉพาะส่วนประกอบที่จำเป็นเท่านั้น ซึ่งต่างจากการใช้แท็ก Anchor ที่โหลดทั้งหน้าซ้ำ ในบทช่วยสอนนี้ เราจะสำรวจวิธีตั้งค่าการกำหนดเส้นทางในแอปพลิเคชัน React โดยใช้ React Router React Router เป็นไลบรารียอดนิยมที่ให้การกำหนดเส้นทางแบบประกาศสำหรับแอปพลิเคชัน React

สารบัญ

∘ ข้อกำหนดเบื้องต้น
· การติดตั้ง
· การตั้งค่าเส้นทาง
· การสร้างส่วนประกอบเส้นทาง
· การเชื่อมโยงไปยังเส้นทาง
· การทดสอบ การกำหนดเส้นทาง
· บทสรุป

ข้อกำหนดเบื้องต้น

ก่อนที่จะเจาะลึกการกำหนดเส้นทาง React เราต้องแน่ใจว่าเราได้ตั้งค่าบางสิ่งไว้แล้ว นี่คือสิ่งที่คุณต้องการ:

1. ติดตั้ง Node.js และ npm บนเครื่องของคุณแล้ว หากต้องการตรวจสอบว่าคุณติดตั้ง Node.ja ไว้ในเครื่องหรือไม่ ให้เปิดเทอร์มินัลแล้วใช้คำสั่งอย่างใดอย่างหนึ่งต่อไปนี้

node -v
npm -v

หากไม่ได้ติดตั้ง Node.js หรือ npm ให้ไปที่เว็บไซต์อย่างเป็นทางการของ Node.js (https://nodejs.org) และทำตามคำแนะนำเพื่อดาวน์โหลดและติดตั้งเวอร์ชันล่าสุดที่เหมาะกับระบบปฏิบัติการของคุณ

2. ความเข้าใจพื้นฐานเกี่ยวกับ React และส่วนประกอบต่างๆ จะมีประโยชน์

3. โครงการตอบโต้ หากคุณไม่มีโปรเจ็กต์ที่มีอยู่ คุณสามารถสร้างโปรเจ็กต์ใหม่ได้โดยใช้ create-react-app ไปที่ไดเร็กทอรีที่คุณต้องการซึ่งโปรเจ็กต์จะถูกจัดเก็บและในเทอร์มินัล VSCode ให้ป้อน:

npx create-react-app my-app

การติดตั้ง

ก่อนอื่น เราต้องติดตั้ง React Router Dom ในโปรเจ็กต์ที่สร้างขึ้นใหม่ของเรา ทำตามขั้นตอนด้านล่าง:

1. นำทางไปยังไดเร็กทอรีโครงการของคุณ

2. เปิดเทอร์มินัลของคุณใน VSCode เพื่อติดตั้ง React Router:

npm install react-router-dom

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

3. รอให้การติดตั้งเสร็จสิ้น npm จะดาวน์โหลดแพ็คเกจและการขึ้นต่อกันของแพ็คเกจ และจะถูกจัดเก็บไว้ในไดเร็กทอรี node_modules ภายในโปรเจ็กต์ของคุณ คุณยังสามารถดูการพึ่งพาได้ใน package.json ของคุณ

4. หลังจากการติดตั้งเสร็จสิ้น คุณก็พร้อมที่จะเริ่มใช้ React Router ในแอปพลิเคชัน React ของคุณ

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

การตั้งค่าเส้นทาง

ในโปรเจ็กต์ React ของคุณ ให้เปิด App.js ของคุณและนำเข้าการอ้างอิงที่จำเป็น:

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

ถัดไป กำหนดเส้นทางของคุณ:

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} />
      </Routes>    
    </Router>
  );
}

ในโค้ดด้านบน เราล้อมเส้นทางของเราด้วยส่วนประกอบ Router คอมโพเนนต์ Routes ช่วยให้มั่นใจได้ว่าจะมีการแสดงผลเส้นทางเดียวเท่านั้นในแต่ละครั้ง เรากำหนดเส้นทางแต่ละเส้นทางโดยใช้องค์ประกอบ Route โดยระบุ path และองค์ประกอบที่เกี่ยวข้องในการแสดงผล

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

มาสร้างส่วนประกอบสำหรับเส้นทางของเรากันดีกว่า ในไฟล์แยกกัน ให้สร้างส่วนประกอบต่อไปนี้: Home.js, About.js, Contact.js และ NotFound.js แต่ละองค์ประกอบควรส่งออกองค์ประกอบการทำงาน:

// Home.js
import React from 'react';

function Home() {
  return <h1>Welcome to the Home Page!</h1>;
}

export default Home;
// About.js
import React from 'react';

function About() {
  return <h1>About Us</h1>;
}

export default About;
// Contact.js
import React from 'react';

function Contact() {
  return <h1>Contact Us</h1>;
}

export default Contact;
// NotFound.js
import React from 'react';

function NotFound() {
  return <h1>Page Not Found</h1>;
}

export default NotFound;

การเชื่อมโยงไปยังเส้นทาง

เพื่อนำทางระหว่างเส้นทาง เราจะใช้ส่วนประกอบ Link ที่ได้รับจาก React Router เปิดไฟล์ App.js ของคุณและนำเข้าส่วนประกอบ Link:

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

อย่าลืมนำเข้าเพจของเราด้วย:

import Home from "./pages/home";
import About from "./pages/about";
import Contact from "./pages/contact";
import NotFound from "./pages/not_found";

อัปเดตองค์ประกอบ App เพื่อรวมลิงก์การนำทาง:

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

import Home from "./pages/home";
import About from "./pages/about";
import Contact from "./pages/contact";
import NotFound from "./pages/not_found";

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

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

export default App;

ในโค้ดด้านบน เราได้เพิ่มองค์ประกอบ nav พร้อมด้วยองค์ประกอบ ul และ li สำหรับลิงก์การนำทาง องค์ประกอบ Link ช่วยให้เราสร้างลิงก์ที่คลิกได้ซึ่งนำทางไปยังเส้นทางที่ระบุ

การทดสอบการกำหนดเส้นทาง

ตอนนี้เราได้ตั้งค่าเส้นทางและสร้างส่วนประกอบแล้ว มาทดสอบเส้นทางของเราในเบราว์เซอร์กันดีกว่า มาเริ่มเซิร์ฟเวอร์การพัฒนาของเราด้วยการรัน npm start ในไดเร็กทอรีโปรเจ็กต์ของเรา

เปิดเบราว์เซอร์แล้วไปที่ http://localhost:3000 เราควรเห็นคอมโพเนนต์ Home แสดงผล

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

บทสรุป

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

โปรดอ่านเอกสารประกอบของ React Router เพื่อดูคุณสมบัติและตัวเลือกการกำหนดเส้นทางขั้นสูงเพิ่มเติม ที่นี่

นี่เป็นการสรุปบทช่วยสอนของเราเกี่ยวกับการใช้การกำหนดเส้นทางด้วย React ขอให้มีความสุขในการเขียนโค้ด!