React Router

Thu, 09 May 2024

React Router คือ library ที่จะช่วยให้เราเพิ่มหน้าในกับ React ได้ ซึ่งจะทำให้กำหนด path หรือ route ให้กับแต่ละ component ได้

Install React Router DOM

ก่อนจะใช้งาน React Router เราต้องทำการติดตั้ง Library ชื่อว่า react-router-dom เข้ามาก่อนด้วย npm

$ npm i react-router-dom

สร้าง Component สำหรับหน้าต่างๆ

หลังจากติดตั้ง React-router แล้วเรายังต้องเตรียม Component สำหรับแต่ละหน้า โดยจะแบ่ง Folder ไว้ดังนี้

├── src
│   ├── pages
│   |   ├── Home.js
│   |   ├── Blog.js
│   |   ├── About.js

จากนั้นให้ไปสร้าง Route ใน index.js ซึ่งสิ่งที่เราจะต้องเพิ่มเข้าไปใน index.js มีดังนี้

Step 1. Import

เราต้่อง import สิ่งที่เราจำเป็นต้องใช้เข้ามาก่อนซึ่งจะประกอบไปด้วย

BrowserRouter ที่ทำหน้าที่จัดเก็บ location ปัจจุบันและ navigate ไปยังหน้า web ต่างๆ โดยใช้ History ใน Browser
Routes ทำหน้าที่เก็บ path ทั้งหมด
Route ทำหน้าที่ระบุว่า path ไหนจะใช้ Element ไหนในการแสดงผล
Components เราต้อง import Element ที่จะนำมาแสดงผลในแต่ละ path เข้ามาด้วย

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Blog from "./pages/Blog";
import About from "./pages/About";

Step 2. Define Route

กำหนด Route ที่ต้องการโดยจะใส่ไว้ใน Function App แบบนี้

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

ซึ่งจะเป็นการระบุว่า

ถ้าเป็น root(/) จะเป็นการนำ Component Home ที่เขียนไว้ใน Home.js มาแสดง
ถ้าเป็น /blog จะเป็นการนำ Component Blog ที่เขียนไว้ใน Blog.js มาแสดง
ถ้าเป็น /about จะเป็นการนำ Component About ที่เขียนไว้ใน About.js มาแสดง
ถ้าตรงกับ path ไหนเลยก็จะนำ Component NotFound ที่เขียนไว้ใน NotFound.js มาแสดง

Link to Path

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

Step 1. Import Link

ขั้นตอนแรกเริ่มจากเราต้อง import Link Component ของ react-router-dom เข้ามาก่อน

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

Step 2. Create Link

หลังจาก import Link เข้ามาแล้ว เราก็ไปสร้าง Link ในหน้าจอของเรา

function Home(){
    return (
        <div>
            <nav>
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
                <Link to="/blog">Blog</Link>
            </nav>
        </div>
    );
}

Nested React Route

ในการทำงานจริงเราต้องมี Header มี Footer ที่ต้องใช้งานร่วมกันในทุกๆหน้า(Template) ซึ่งถ้าเราต้องใช้ Template เราจะสร้าง Route แบบ Nested Route ซึ่งการทำงานของ Nested Route จะเป็นการใช้ Prefix ร่วมกัน(ข้างหน้าพิมพิ์เหมือนกัน) เช่น ในตัวอย่างนี้ผมจะทำการย้ายทุกอย่าง ไปอยู่ภายใต้ / แล้วหลังจากนั้นหลังจาก / ก็จะเป็น Route ย่อยๆ ซึ่งเราจะแก้ไข Code โดยการใส่ <Route></Route> ครอบแบบนี้

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="/blog" element={<Blog />} />
            <Route path="/about" element={<About />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

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

สังเกตุว่า Route ที่อยู่ข้างในจะไม่ใส่ / นำหน้า เหมือนในบรรทัดที่ 7 และ 8

หลังจากนั้นเพิ่ม Component เข้ามาใหม่ตั้งชื่อว่า Layout สำหรับเพื่อให้เป็น Master Page ที่ Page ย่อยๆ จะมาวางลงในนี้

├── src
│   ├── pages
│   |   ├── Layout.js
│   |   ├── ...

และใส่ JSX ของ Layout ลงไปแบบนี้

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

function Layout(){
    return (
        <div>
            <nav>
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
                <Link to="/blog">Blog</Link>
            </nav>
        </div>
        <div>
            <Outlet>
        </div>
    );
}

ซึ่งใน Layout เราจะต้อง import Outlet Component เข้ามาเพื่อบอกกับ React Router ว่าเมื่อ render HTML ของแต่ละ Component เสร็จแล้วให้ไปวางไว้ใน Outlet นี้

หลังจากนี้ทุกๆหน้าจะมี Navbar Link ไปยังหน้าต่างๆได้ และเมื่อ path ที่พิมพิ์เข้าไม่มีอยู่ใน Route ของเราก็ให้แสดงผล NotFound Component ที่เราสร้างเพิ่มขึ้นมาได้เหมือนกัน

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="/blog" element={<Blog />} />
            <Route path="/about" element={<About />} />
            <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}