สรุปสั้น ๆ
สำหรับคนที่กำลังสนใจหรือกำลังพัฒนาเว็บด้วย 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 ที่กำหนดแบบนี้จะมี Dynamic Params ชื่อ userId ถ้าเราเข้าด้วย url
ใน 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 มาแล้วประกาศตามโค้ดด้านล่างได้เลย
โดยถ้า URL path ปัจจุบันเราเป็นแบบนี้
แล้วเราลอง console.log(searchParams) ออกมาข้อมูลที่เราจะได้คือ
โดยข้อมูลนี้จะเป็น type URLSearchParams ซึ่งเราสามารถใช้ .get(name) เพื่อเรียกข้อมูล customer ที่เราต้องการได้
ผลลัพธ์จะได้เป็นข้อมูล Query String ชื่อ Customer ออกมาแล้ว
สำหรับข้อมูล type URLSearchParams ถ้าใครอยากรู้ว่าทำอะไรได้อีกนอกจาก .get ตามไปดูได้เลยที่ https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
ส่วน setSearchParams เราสามารถใส่เป็น Object ที่มีค่าที่เราต้องการได้เลยเช่นถ้าเราอยากเขียนโค้ดสำหรับแก้ Query String ให้เป็น ?hi=5 ก็เขียนได้แบบนี้
URL path ของเราก็จะเปลี่ยนจากมี ?customer=true เป็นแบบนี้แทน
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: ซึ่ง 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 ได้เลย ตอนนี้อาจจะมีมากกว่าที่เคยดูก่อนหน้านี้แล้วกำลังอยากใช้อยู่ก็ได้นะ
ระบบฝึกทักษะ การเขียนโปรแกรม
ที่พร้อมตรวจผลงานคุณ 24 ชั่วโมง
- โจทย์ปัญหากว่า 200 ข้อ ที่รอท้าทายคุณอยู่
- รองรับ 9 ภาษาโปรแกรมหลัก ไม่ว่าจะ Java, Python, C ก็เขียนได้
- ใช้งานได้ฟรี ! ครบ 20 ข้อขึ้นไป รับ Certificate ไปเลย !!
