จำนวนคนเข้าดู: 112

React ตัวอย่างการใช้งาน React Router Step-By-Step

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

npm install react-router-dom
ติดตั้ง react router

React Router Components

BrowserRouter: เป็นคอมโพเนนต์ของ React Router ที่ใช้งาน HTML5 history API (pushState, replaceState, และ popstate event) เพื่อให้ UI ของคุณสอดคล้องกับ URL โดยเป็นคอมโพเนนต์แม่ที่ใช้เก็บคอมโพเนนต์อื่น ๆ ที่เกี่ยวข้องกับการเปลี่ยนเส้นทาง
Routes: เป็นคอมโพเนนต์ที่ถูกนำเข้ามาในเวอร์ชัน 6 เพื่ออัพเกรดคอมโพเนนต์การนำทางก่อนหน้า (Switch) โดยมีข้อดีหลักคือการเลือกเส้นทางที่ดีที่สุดแทนการท่องไปในลำดับ
Route: เป็นคอมโพเนนต์ที่แสดง UI ตามเงื่อนไขเมื่อเส้นทางที่กำหนดตรงกับ URL ปัจจุบัน
Link: คอมโพเนนต์ Link ใช้สร้างลิงก์ภายในแอปพลิเคชันของคุณที่นำไปยังเส้นทางต่าง ๆ โดยทำงานเช่นเดียวกับแท็ก anchor HTML (<a>) แต่ออกแบบมาเพื่อใช้งานกับ React Router โดยเฉพาะ การใช้ Link ช่วยให้การนำทางภายในแอปพลิเคชันของคุณถูกจัดการอย่างมีประสิทธิภาพโดย React Router

เรียกใช้งานไฟล์ app.js

import React from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import NotFound from "./components/NotFound";
import Navbar from "./components/Navbar";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/about" element={<About />}></Route>
          <Route path="/*" element={<NotFound />}></Route>
          <Route path="/Home" element={<Navigate to={"/"} />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

import React from "react";

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

import Home from "./components/Home";

import About from "./components/About";

import NotFound from "./components/NotFound";

import Navbar from "./components/Navbar";

function App() {

return (

</Routes>

</BrowserRouter>

</div>

);

}

export default App;

สร้างไฟล์ประกอบใน components เช่น Navbar.jsx

import React from 'react'
import { Link } from 'react-router-dom'
import './Navbar.css'
function Navbar() {
  return (
   <nav>
    <Link to="/" className='logo'>
        <h3>Web Devtai Waiyawut</h3>
    </Link>
    <Link to="/home">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/notfound">NotFound</Link>
   </nav>
  )
}

export default Navbar

import React from 'react'

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

import './Navbar.css'

function Navbar() {

return (

<nav>

<h3>Web Devtai Waiyawut</h3>

</Link>

<Link to="/about">About</Link>

<Link to="/notfound">NotFound</Link>

</nav>

)

}

export default Navbar

Home.jsx

import React from 'react'

function Home() {
  return (
    <div>
      <h1>Home</h1>
    </div>
  )
}

export default Home

import React from 'react'

function Home() {

return (

<div>

</div>

)

}

export default Home

About.jsx

import React from 'react'

function About() {
  return (
    <div>
       <h1>About</h1>
    </div>
  )
}

export default About

import React from 'react'

function About() {

return (

<div>

<h1>About</h1>

</div>

)

}

export default About

NotFound.jsx

import React from 'react'

function NotFound() {
  return (
    <div>
      <h1>NotFound</h1>
    </div>
  )
}

export default NotFound

import React from 'react'

function NotFound() {

return (

<div>

<h1>NotFound</h1>

</div>

)

}

export default NotFound

กำหนด css เช่น Navbar.css

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
}

.logo {
    margin-right: auto;
    padding-left: 10px;
    color: white;
    flex-grow: 1;
}

a {
    color: white;
    text-decoration: none;
    margin-left: 12px;
    font-size: 18px;
    padding: 10px;
}

a:hover {
    color: orange;
}

nav {

display: flex;

justify-content: center;

align-items: center;

background-color: #333;

}

.logo {

margin-right: auto;

padding-left: 10px;

color: white;

flex-grow: 1;

}

a {

color: white;

text-decoration: none;

margin-left: 12px;

font-size: 18px;

padding: 10px;

}

a:hover {

color: orange;

}

index.css

body {
  font-family: 'Mulish', sans-serif;
  font-size: 18px;
  margin: 0;
  padding: 0px;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  color: #333;
  text-align: center;
}

img {
  width: 900px;
  height: 600px;
}

body {

font-family: 'Mulish', sans-serif;

font-size: 18px;

margin: 0;

padding: 0px;

}

.container {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.title {

color: #333;

text-align: center;

}

img {

width: 900px;

height: 600px;

}

Reference

● https://www.w3schools.com/react
● https://reactrouter.com/en/main

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651

ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

React React Router

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ ทำเว็บไซต์ รับสอนเขียนโปรแกรม inbox มาที่เพจ หรือติดต่อ 098-373-8651 ช่องทางการชำระเงิน เงินสด หรือ e-banking ธนาคารกสิกรไทย เลขบัญชี : 0951168564 ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

React ตัวอย่างการใช้งาน React Router Step-By-Step

Share this:

Related

วัยวุฒิ ชุมเมืองปัก