การเรียกใช้งาน React Router ฉบับฉับไว

สำหรับบทความนี้ผมจะพาทุกท่านมาลองใช้งาน React Router ที่จะเป็นตัวช่วยสำหรับการเปลี่ยนเพจหรือทำให้เพจของเรามีหลายหน้านั่นเอง

React Router คืออะไร ?

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

ข้อดี

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

มาเริ่มต้นด้วยการ Setup โปรเจกต์ด้วย Vite กัน

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

1.ทำการติดตั้ง Node.js กันก่อนเพื่อเราจะได้เรียกใช้คำสั่ง npm ได้

จากนั้นให้เราทำการเปิด Terminal ของเราแล้วใช้คำสั่งตามนี้เลย

npm create vite@latest ชื่อโปรเจกต์ของเรา -- --template react
# คำสั่งต่อมา
cd <ที่อยู่โฟลเดอร์ในโปรเจกต์ของเรา>
npm install react-router-dom localforage match-sorter sort-by
npm run dev

หลังจากนั้นมีจะมี url ปรากฏขึ้นมาให้เราลองกดเข้าไปเพื่อเช็คดูว่าโปรเจกต์เขาเรานั้นใช้งานได้

หากเรากดไปที่ url ของเราแล้วขึ้นหน้าเพจแบบนี้แสดงว่าใช้งานได้

2.ลบไฟล์ที่ไม่ต้องการและเพิ่มไฟล์ใหม่ลงไปแทน

สิ่งต่อมาที่จะต้องทำก็คือการเคลียร์ไฟล์ที่ไม่ได้ใช้งานโดยเจ้า Vite จะทำการดึงเอาไฟล์ค่าเริ่มต้นต่าง ๆ ให้เราทำการลบไฟล์ต่าง ๆ ดังต่อไปนี้

• โฟลเดอร์ assets
• App.css
• App.js

ทำการสร้าง component ในโฟลเดอร์ src ชื่อว่า Navbar.jsx แล้วใส่โค๊ดที่ผมให้ลงไป

import React from 'react';
import './Navbar.css'; // นำเข้า Navbar.css สำหรับการตกแต่ง

function Navbar() {
  return (
    <nav className="navbar">
      <div className="logo">React Router</div>
      <ul className="nav-links">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  );
}

export default Navbar;

สร้างไฟล์ css เพิ่มเติมแล้วนำโค๊ดที่ผมให้ใส่ลงไป

.navbar {
    background-color: #333;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
  }
  
  .logo {
    font-size: 1.5rem;
  }
  
  .nav-links {
    list-style: none;
    display: flex;
  }
  
  .nav-links li {
    margin-right: 20px;
  }
  
  .nav-links li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .nav-links li a:hover {
    color: #f0f0f0;
  }

Navbar ใช้สำหรับการแสดงเมนูเพื่อให้สามารถคลิกเข้าไปยังลิงค์อื่น ๆ ได้

ทำการสร้าง component ในโฟลเดอร์ src ชื่อว่า Home.jsx แล้วใส่โค๊ดที่ผมให้ลงไป

import Navbar from './Navbar';
import React from 'react';

function Home() {
  return (
    <>
        <Navbar/>
        <div>
        <h2>Welcome to the Home Page!</h2>
        <p>This is the homepage of our website.</p>
        </div>
    </>
  );
}

export default Home;

3.การเพิ่ม Router ลงไปใน Page

ทุกคนจะสังเกตได้ว่าจะมีไฟล์ main.jsx อยู่ซึ่งไฟล์นี้จะเป็นไฟล์สำคัญที่เอาไว้แสดงผลส่วนของหน้าเว็บของเรานั่นเอง เราจึงจำเป็นที่จะต้องเรียกใช้ Routing ขึ้นมาก่อนโดยสามารถทำได้ดังนี้

import React from 'react'
import ReactDOM from 'react-dom/client'
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import Home from './Home';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home/>,
  },
// ส่วนของ path และ element เราสามารถเพิ่มมาอีกได้เรื่อย ๆ กรณีที่เรามีหลายเพจ
]);

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

ไฮไลท์สีเหลืองจะเป็นโค้ดที่ถูกเพิ่มเข้ามาจากเดิมนะครับ

ผลลัพธ์

ในส่วนนี้จะช่วยให้ React สามารถติดต่อข้อมูลต่าง ๆ กับ component ของเราได้โดยอิงจากตัวของ URL ซึ่งจะกำหนดตรงบริเวณ path ซึ่งค่าเริ่มต้นกรณีที่เป็นหน้าแรกเราจะใช้ “/” แล้วตามด้วย element ที่เราจะนำข้อมูลของ component มาแสดงผลหาก url ของเว็บไซต์เปลี่ยนผลลัพธ์จะเป็นอย่างไรมาดูกัน !!

4.การดักจับ Page ที่ Error

สิ่งสำคัญเป็นอันดับต้น ๆ สำหรับการทำ Router คือการดักจับ Page ที่ไม่สามารถตรวจพบได้ซึ่งผมจะมาวิธีการดัก Page error รวมถึงการ Custom หน้าตา Page error แบบเบื้องต้นกัน

เริ่มด้วยการสร้าง component ErrorPage ของเรากันก่อน

import React from 'react';
import Navbar from './Navbar';

function ErrorPage() {
  return (
    <>
    <Navbar/>
    <div>
      <h2>404 - Not Found</h2>
      <p>Oops! The page you're looking for doesn't exist.</p>
    </div>
    </>
  );
}

export default ErrorPage;

จากนั้นให้เรามายัง main.js ของเราและ Import error page ของเรามาด้วย

import React from 'react'
import ReactDOM from 'react-dom/client'
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import Home from './Home';
import ErrorPage from './Error';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home/>,
    errorElement: <ErrorPage />,
  },
]);

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

ผลลัพธ์

โดยเพียงแค่เราเพิ่ม errorElement ใต้บรรทัดของ element แค่นี้เราก็สามารถที่จะมี Error Page ที่จะแสดงผลเมื่อ Url ของเราไม่สามารถตรวจพบแล้วได้นั่นเอง ซึ่งจริงๆ จะมีส่วนของ Status text ที่จะบอกสาเหตุของการ Error ด้วยแต่บทความนี้จะไม่ได้ครอบคลุมในส่วนนั้นโดยสามารถเข้าไปศึกษาเพิ่มเติมได้ที่ลิงค์นี้เลย ErrorElement

5.มาลองเพิ่ม Page อื่น ๆ กัน !!

หลังจากที่เราได้ Page หลักของเราและ ErrorPage ของเราแล้วเรามาเริ่มสร้าง Page อื่น ๆ เพื่อให้เราสามารถลิงก์เข้าไปได้กันดีกว่า !!!

ทำการสร้าง component ในโฟลเดอร์ src ชื่อว่า Contact.jsx แล้วใส่โค้ดที่ผมให้ลงไป

import React from 'react';
import Navbar from './Navbar';

function Contact() {
  return (
    <>
    <Navbar/>
    <div>
      <h2>Contact Us</h2>
      <p>You can reach out to us via the following methods:</p>
      <ul>
        <li>Email: example@example.com</li>
        <li>Phone: 123-456-7890</li>
        <li>Address: 123 Main Street, City, Country</li>
      </ul>
    </div>
    </>
  );
}

export default Contact;

ทำการสร้าง component ในโฟลเดอร์ src ชื่อว่า About.jsx แล้วใส่โค้ดที่ผมให้ลงไป

import React from 'react';
import Navbar from './Navbar';

function About() {
  return (
    <>
    <Navbar/>
    <div>
      <h2>About Us</h2>
      <p>This is the About Us page. We are dedicated to providing high-quality services to our customers.</p>
    </div>
    </>
  );
}

export default About;

เมื่อเราได้ Page ของเราแล้วให้มายัง main.js จากนั้นเราจำเป็นต้อง Import Contact.jsx และ About.jsx ของเราเข้ามาด้วย

import React from 'react'
import ReactDOM from 'react-dom/client'
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import Home from './Home';
import Contact from './Contact';
import About from './About';

import ErrorPage from './Error';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home/>,
    errorElement: <ErrorPage />,
  },
]);

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

จากนั้นให้เราทำการเพิ่ม router ใหม่เข้ามาและกำหนด Path ให้ตรงกับชื่อ Page ที่เราสร้าง

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home/>,
    errorElement: <ErrorPage />,
  },
  {
    path: "/about",
    element: <About/>,
  },
  {
    path: "/contact",
    element: <Contact/>,
  },
]);

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

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

About Page

Contact Page

เมื่อเราสามารถสร้าง Page หลาย ๆ Page ได้แล้วส่วนสุดท้ายก็คือการสร้างลิงก์เพื่อไปยัง Page นั้น ๆ นั่นเองซึ่งจะทำอย่างไรไปดูกัน

6.มาสร้าง Link บริเวณ Navbar เพื่อไปยัง Page อื่น ๆ กัน

โดยปกติแล้วการที่เราจะ Link ไปยัง Page อื่น ๆ เราจำเป็นต้องใช้ Tag <a> และใช้ attribute href กัน แต่เนื่องด้วย React ทำแบบนั้นไม่ได้เพราะ React มีพื้นฐานโครงสร้างมาจาก Javascript ซึ่งด้วยข้อจำกัดที่เป็น Virtual Dom อาจทำให้เกิดปัญหากับการเก็บข้อมูลแบบ State ได้

อันดับแรกมายัง Navbar.jsx ให้เราทำการ Import Link มาจาก Router-dom กันก่อน

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

จากนั้นให้เราทำการเปลี่ยน Tag <a> ให้เป็น Tag <Link> และเปลี่ยน attribute ข้างในจาก href ให้เป็น to แล้วตามด้วย path ที่เราได้ทำการกำหนดเอาไว้ใน main.jsx

import React from 'react';
import './Navbar.css'; 
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav className="navbar">
      <div className="logo">Routing</div>
      <ul className="nav-links">
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

export default Navbar;

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

7.การแก้ปัญหาตำแหน่งของ Page ยังอยู่ที่เดิม

ปัญหานี้มักจะตามมาเพราะการที่เราทำการเปลี่ยน Page โดยปกติจะทำการ Refresh หน้าเว็บอยู่แล้วแต่เพราะการใช้ Router เป็นการ Render UI แบบเฉพาะทำให้ปัญหาที่ตามมาคือเมื่อเราทำการเปลี่ยน Page แล้วเราเลื่อนลงมาตำแหน่งล่าง ๆ ของเว็บแล้วเราเปลี่ยน Page ทำให้ใน Page ที่เปลี่ยนจะยังคงตำแหน่งเดิมเอาไว้ซึ่งผมจะพาทุกท่านมาดูวิธีแก้ง่าย ๆ กันครับ

ทำการสร้าง Component ที่ชื่อว่า Scrolltotop.jsx ขึ้นมากันก่อน จากนั้นให้ทำการใส่ code นี้ลงไป

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
 
export default function GoToTop() {
    const routePath = useLocation();
    const onTop = () => {
        window.scrollTo(0, 0);
    }
    useEffect(() => {
        onTop()
    }, [routePath]);
 
    return null;
}

เมื่อเราได้สร้าง component Scrolltotop มาแล้วเราสามารถที่จะนำมาเรียกใช้ใน Page อื่น ๆ แล้วนำมาวางในส่วนล่างสุดได้เลยครับ เพียงเท่านี้เราก็สามารถที่จะแก้ปัญหาเมื่อเปลี่ยนหน้า Page แล้วตำแหน่งเว็บของเราไม่กลับมาตำแหน่งบนสุดได้แล้วครับ

สรุป

การใช้งาน React Router เป็นสิ่งที่ดูซับซ้อนสำหรับมือใหม่เป็นอย่างมาก แต่อย่างไรก็ตามหลักการทำงานก็เหมือนกับการสร้าง Tag <a> เพียงแต่เราจำเป็นต้อง Setup ในส่วนของ Main.jsx ของเราให้มีโครงสร้างที่ดีจากนั้นเพียงแค่เราสร้าง Page ที่มี component แล้วนำมาเรียกใช้ก็เพียงพอแต่สิ่งสำคัญอีกอย่างคือการทำ ErrorPage ที่จะช่วยให้เว็บของเรามีความครบถ้วนมากยิ่งขึ้นนั่นเอง

อ้างอิง

1. React Router tutorial,สืบค้นเมื่อวันที่ 5 เมษายน 2567
   จาก : https://reactrouter.com/en/main/start/tutorial
2. Scroll To Top when Route Changes,สืบค้นเมื่อวันที่ 5 เมษายน 2567
   จาก : Kunal Ukey
3. การ Routing ไปยัง Page อื่นๆ ใน Reactjs,สืบค้นเมื่อวันที่ 5 เมษายน 2567
   จาก : Jan Tapa