สร้างและจัดการเส้นทาง Routing ใน React

ใน React คุณสามารถใช้ React Router สำหรับการจัดการ routing ในแอพของคุณได้ นี่คือลำดับขั้นตอนในการตั้งค่า routing สำหรับหน้า login, register, home, contact, และหน้าอื่นๆ

ติดตั้ง React Router: ถ้าคุณยังไม่ได้ติดตั้ง React Router ให้ติดตั้งผ่าน npm หรือ yarn

npm install react-router-dom

หรือ

yarn add react-router-dom

ตั้งค่า Routing: ในไฟล์ App.js หรือไฟล์หลักของคุณที่ใช้สำหรับการกำหนด routing, คุณจะต้อง import BrowserRouter, Routes, และ Route จาก react-router-dom และกำหนดเส้นทางต่างๆ ดังนี้

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

import Home from './pages/Home';
import Login from './pages/Login';
import Register from './pages/Register';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound'; // สำหรับหน้า 404

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} /> {/* เส้นทางที่ไม่ตรงกับใดๆ */}
      </Routes>
    </Router>
  );
}

export default App;

สร้างหน้า (Components): สร้างไฟล์สำหรับแต่ละหน้าที่คุณต้องการในโฟลเดอร์ pages หรือโฟลเดอร์ที่คุณเลือก ตัวอย่างเช่น:

• pages/Home.js
• pages/Login.js
• pages/Register.js
• pages/Contact.js
• pages/NotFound.js

ตัวอย่างของ Home.tsx

import React from 'react';

function Home() {
  return <h1>Home Page</h1>;
}

export default Home;

ใช้ Link สำหรับการนำทาง: เพื่อให้การนำทางไปยังหน้าต่างๆ ทำได้สะดวก คุณสามารถใช้ Link จาก react-router-dom แทนการใช้ <a> tag ธรรมดา

import React from 'react';
import { Link } from 'react-router-dom';

function NavBar() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/login">Login</Link></li>
        <li><Link to="/register">Register</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

export default NavBar;

ทำตามขั้นตอนเหล่านี้แล้วคุณจะสามารถตั้งค่า routing สำหรับแอพ React ของคุณได้อย่างง่ายดาย!