Skip to main content
0

สรุปสั้น ๆ

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

เขียนโดย
Pachara Chaicharoen
MidLevel Software Developer

บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 25 สิงหาคม 2566

แน่นอนว่าต้อง Install กันก่อน

npm i react-router-dom

บทความนี้จะข้ามเรื่องการ Setup การ Route ออกไป แต่สามารถดูการ Setup เบื้องต้นด้วย Browser Router ได้จาก ลิงก์ด้านล่างนี้

https://reactrouter.com/en/main/router-components/browser-router

และสำหรับมือใหม่หรือมือเก๋าบางครั้งเราก็ต้องการเครื่องมือในการเรียกใช้ข้อมูลเมื่อมีการเปลี่ยนหน้าภายในเว็บไม่ว่าจะเป็นชื่อ Path ปัจจุบันหรือข้อมูลปัจจุบันที่เกิดขึ้นภายใน Router ตัว React Router นี้ก็มี Hook สำหรับให้เราใช้เพื่อดึงข้อมูล ซึ่งปกติการส่งข้อมูลอะไรใน React เราก็รู้กันดีว่าสามารถส่งผ่าน Props ลงมาได้ แต่สำหรับ Hook เราจะสามารถใช้งานมันที่ไหนก็ได้ตราบใดที่อยู่ภายใน Router หรือแม้แต่ Hook สำหรับทำอะไรบางอย่างเช่นการเปลี่ยนหน้าปัจจุบันไปที่หน้าอื่นด้วย เราไปดูกันดีกว่าว่ามีอะไรน่าใช้บ้าง

useParams

https://reactrouter.com/en/main/hooks/use-params

ถ้าเราอยากสร้างหน้าที่มีข้อมูลเปลี่ยนเนื้อหาไปตาม Slug ชื่อ หรือ ID ที่กำหนด useParams เป็นตัวที่น่าจะได้ใช้บ่อย เพราะ Hook นี้จะ return Object ของ Dynamic Params จาก URL ปัจจุบันที่ตรงกับ <Route path> โดยที่ Child Routes จะสืบทอด Params มาจาก Parent Routes ด้วย เช่น

<Route path="users"> 

<Route path=":userId" element={<ProfilePage />} /> 

</Routes>

Route ที่กำหนดแบบนี้จะมี Dynamic Params ชื่อ userId ถ้าเราเข้าด้วย url

/users/16587

ใน Component ProfilePage เราก็จะสามารถเรียกข้อมูล 16587 ที่เป็น userId จาก useParams ได้ตามโค้ดด้านล่างเพื่อเอาไปเป็นข้อมูลเพื่อเรียก api ต่อได้

import * as React from 'react';
import { useParams } from 'react-router-dom';

function ProfilePage() {
 // Get the userId param from the URL.
 let { userId } = useParams();
 // ...
}

useSearchParams

https://reactrouter.com/en/main/hooks/use-search-params

Hook ที่ใช้สำหรับอ่านข้อมูลหรือกำหนด Query String ใน URL ณ ตำแหน่งปัจจุบัน โดย Hook นี้จะมีการใช้เหมือน useState Hook โดยจะมี searchParams เป็นข้อมูล และ setSearchParams เป็นตัว set ข้อมูลลอง import มาแล้วประกาศตามโค้ดด้านล่างได้เลย

 let [searchParams, setSearchParams] = useSearchParams();

โดยถ้า URL path ปัจจุบันเราเป็นแบบนี้

/users/16587?customer=true

แล้วเราลอง console.log(searchParams) ออกมาข้อมูลที่เราจะได้คือ

URLSearchParams {size: 1}

โดยข้อมูลนี้จะเป็น type URLSearchParams ซึ่งเราสามารถใช้ .get(name) เพื่อเรียกข้อมูล customer ที่เราต้องการได้

 console.log(searchParams.get('customer'))

ผลลัพธ์จะได้เป็นข้อมูล Query String ชื่อ Customer ออกมาแล้ว

 true

สำหรับข้อมูล type URLSearchParams ถ้าใครอยากรู้ว่าทำอะไรได้อีกนอกจาก .get ตามไปดูได้เลยที่ https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

ส่วน setSearchParams เราสามารถใส่เป็น Object ที่มีค่าที่เราต้องการได้เลยเช่นถ้าเราอยากเขียนโค้ดสำหรับแก้ Query String ให้เป็น ?hi=5 ก็เขียนได้แบบนี้

 setSearchParams({hi: '5'})

URL path ของเราก็จะเปลี่ยนจากมี ?customer=true เป็นแบบนี้แทน

/users/16587?hi=5

useSearchParams

https://reactrouter.com/en/main/hooks/use-routes#useroutes

Hook ที่ใช้สำหรับการ Setup Route ที่ใช้ Object แทนการประกาศแบบ Component ที่จะเป็นการสร้างแบบการเอา Component Route มาต่อกันซึ่ง เราสามารถใช้ useRoutes เพื่อสร้างเป็นอีกรูปที่เราสามารถใช้ Object มากำหนดการ Route ได้เช่น

import * as React from "react";
import { useRoutes } from "react-router-dom";

function App() {
 let element = useRoutes([
   {
     path: "/",
     element: ,
     children: [
       {
         path: "messages",
         element: ,
       },
       { path: "tasks", element:  },
     ],
   },
   { path: "team", element:  },
 ]);
 return element;
}

ซึ่ง Object ที่อยู่ใน Array 1 ตัวก็คือการ Route 1 path จากตัวอย่าง Property ในแต่ละ Object ก็จะประกอบไปด้วย
path: ชื่อ Path ที่เราอยากได้
element: Element ที่ต้องการ Render สำหรับ Path นั้น ๆ
children (optional): Child Route ของ Path นั้น ๆ
ซึ่ง children เราสามารถเพิ่มได้เท่าที่เราต้องการเลย

ตัวอย่างการ Setup Route โดยไม่ได้ใช้ useRoutes

<Routes>
 <Route path="/" element={<Dashboard />}>

   <Route
     path="messages"
     element={<DashboardMessages />}
   />
   <Route path="tasks" element={<DashboardTasks />} />
 </Route>
 <Route path="about" element={<AboutPage />} /> 
</Routes>

useLocation

https://reactrouter.com/en/main/hooks/use-location

Hook ที่ใช้สำหรับอ่านข้อมูล Location ปัจจุบัน เช่น pathname ปัจจุบัน ซึ่งข้อมูลนี้จะเปลี่ยนเมื่อ URL มีการเปลี่ยนแปลง มีประโยชน์มากถ้าเราอยาก Handle Event ตอนที่ URL เปลี่ยนแปลงเช่นโค้ดตามตัวอย่าง

import * as React from 'react';
import { useLocation } from 'react-router-dom';

function App() {
 let location = useLocation();
 React.useEffect(() => {
   // Google Analytics
   ga('send', 'pageview');
 }, [location]);

 return (
   // ...
 );
}

คำตอนนี้ก็น่าจะได้รู้จักกับ Hook ไปพอสมควรแล้ว จริง ๆ แล้ว Hook ของ React Router V6 ยังไม่หมดเท่านี้ยังมี Hook อื่น ๆ อีก เช่น useNavigate ที่เราสามารถใช้เพื่อ Redirect ไปที่หน้าต่าง ๆ โดยที่สามารถเลือกการ Replace ได้แต่ตอนนี้ Doc ไม่แนะนำให้ใช้ท่านี้ (ณ ตอนที่เขียนบทความ) หรือ useMatch ที่สามารถเทียบได้ว่า Path ตรงกับที่กำหนดรึเปล่า เผื่อในเคสที่มีการชนกันของ Children Route ที่เป็น Dynamic Route แล้วเราอยากรู้ว่าปัจจุบันเข้าไปอยู่ใน Route ไหนกันแน่

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

https://reactrouter.com/en/main

ระบบฝึกทักษะ การเขียนโปรแกรม

ที่พร้อมตรวจผลงานคุณ 24 ชั่วโมง

  • โจทย์ปัญหากว่า 200 ข้อ ที่รอท้าทายคุณอยู่
  • รองรับ 9 ภาษาโปรแกรมหลัก ไม่ว่าจะ Java, Python, C ก็เขียนได้
  • ใช้งานได้ฟรี ! ครบ 20 ข้อขึ้นไป รับ Certificate ไปเลย !!
เข้าใช้งานระบบ DevLab ฟรี !เรียนรู้เพิ่มเติม

เรียนรู้ไอที “อัพสกิลเขียนโปรแกรม” จากตัวจริง
ปั้นให้คุณเป็น คนสายไอทีระดับมืออาชีพ

BorntoDev

Author BorntoDev

BorntoDev Co., Ltd.

More posts by BorntoDev
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า