- React Router คืออะไร
- ส่วนประกอบหลักของ React Router
- การตั้งค่า (Setting Up) React Router
- การกำหนดเส้นทางขั้นสูง
- การพิจารณาประสิทธิภาพ
ReactJS ซึ่งพัฒนาโดย Facebook เป็นไลบรารี JavaScript ที่ได้รับการยกย่องอย่างสูงซึ่งใช้ในการพัฒนาส่วนติดต่อผู้ใช้สำหรับแอปพลิเคชันแบบหน้าเดียว ด้วยการสร้างส่วนประกอบ UI ที่ใช้ซ้ำได้ ReactJS ช่วยให้นักพัฒนาสามารถทำเว็บ ReactJS และทำแอพที่การอัปเดตข้อมูลไม่จำเป็นต้องโหลดหน้าซ้ำ ซึ่งช่วยยกระดับประสบการณ์ผู้ใช้ ส่วนสำคัญในการทำเว็บ ReactJS และทำแอพ คือการใช้ React Router อย่างเชี่ยวชาญ
1. React Router คืออะไร
React Router เป็นไลบรารีการกำหนดเส้นทางที่ทรงพลังซึ่งสร้างขึ้นจาก React ซึ่งช่วยเพิ่มหน้าจอใหม่และโฟลว์ไปยังแอปพลิเคชันของคุณอย่างรวดเร็วอย่างไม่น่าเชื่อ ในขณะที่ทำให้ URL ซิงค์กับสิ่งที่แสดงบนหน้า นี่เป็นแกนหลักของตรรกะการนำทางในแอปพลิเคชัน React ให้การซิงโครไนซ์ระหว่าง UI ของคุณและ URL โดยจับคู่ตำแหน่งปัจจุบันกับมุมมองคอมโพเนนต์ที่ควรแสดงผล
2. ส่วนประกอบหลักของ React Router
React Router ประกอบด้วยองค์ประกอบหลายอย่างที่ทำงานร่วมกันเพื่อสร้างกรอบการกำหนดเส้นทางที่ครอบคลุม นี่คือองค์ประกอบหลักบางส่วน:
- BrowserRouter : ส่วนประกอบนี้ใช้ API ประวัติ HTML5 เพื่อให้ UI ของคุณซิงค์กับ URL มันสร้างอินสแตนซ์ประวัติเบราว์เซอร์ให้คุณพร้อมคุณสมบัติและวิธีการต่าง ๆ ที่พร้อมใช้งาน
- Route : ส่วนประกอบนี้อาจเป็นส่วนประกอบที่สำคัญที่สุดใน React Router เป็นวิธีการกำหนดกฎการกำหนดเส้นทางภายในแอปพลิเคชันของคุณ ตรงกับเส้นทางของ URL กับส่วนประกอบในการแสดงผล
- Link : คอมโพเนนต์ลิงก์ช่วยให้คุณสร้างลิงก์ในแอปพลิเคชันของคุณได้ เทียบเท่ากับการใช้แท็กสมอใน HTML แต่ทำงานภายในขอบเขตของแอปพลิเคชัน React
- Switch : คอมโพเนนต์สวิตช์ใช้เพื่อแสดงเส้นทางหรือการเปลี่ยนเส้นทางแรกที่ตรงกับตำแหน่งปัจจุบันเท่านั้น
- Redirect : ส่วนประกอบนี้ช่วยให้คุณเปลี่ยนเส้นทางจากเส้นทางหนึ่งไปยังอีกเส้นทางหนึ่ง
3. การตั้งค่า (Setting Up) React Router
หากต้องการเริ่มใช้ React Router ในโครงการของคุณ ให้ติดตั้งผ่าน npm ก่อน:
npm install react-router-domเมื่อติดตั้งแล้ว คุณสามารถนำเข้าส่วนประกอบที่จำเป็นที่ด้านบนของไฟล์ได้:
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';จากนั้นคุณสามารถกำหนดเส้นทางสำหรับแอปพลิเคชันของคุณได้ นี่คือตัวอย่างพื้นฐาน:
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>ในตัวอย่างนี้ เราได้กำหนดสองเส้นทาง: เส้นทางหนึ่งสำหรับหน้าแรก (“/”) และอีกเส้นทางหนึ่งสำหรับหน้าเกี่ยวกับ (“/about”) คอมโพเนนต์ลิงก์ช่วยให้เราสามารถนำทางระหว่างหน้าเหล่านี้ได้ และคอมโพเนนต์สวิตช์ช่วยให้แน่ใจว่ามีการแสดงเส้นทางเดียวเท่านั้นในแต่ละครั้ง
4. การกำหนดเส้นทางขั้นสูง
เมื่อคุณคุ้นเคยกับ React Router มากขึ้น คุณอาจต้องใช้รูปแบบการกำหนดเส้นทางที่ซับซ้อนมากขึ้น ตัวอย่างเช่น คุณอาจต้องใช้เส้นทางที่ซ้อนกัน พารามิเตอร์ URL หรือโปรแกรมนำทางจากหน้าจอหนึ่งไปยังอีกหน้าจอหนึ่ง React Router มีความยืดหยุ่นอย่างเหลือเชื่อและรองรับกรณีการใช้งานเหล่านี้ทั้งหมด
ตัวอย่างเช่น หากคุณมีคอมโพเนนต์ Users และคุณต้องการดูรายละเอียดสำหรับผู้ใช้แต่ละราย คุณอาจกำหนดเส้นทางดังนี้:
<Route path="/users/:id" component={UserDetails} />ในเส้นทางนี้ “:id” คือพารามิเตอร์ URL ที่คุณเข้าถึงได้ภายในคอมโพเนนต์ UserDetails สิ่งนี้ทำให้คุณสามารถแสดงเนื้อหาต่างๆ ตาม ID ของผู้ใช้
5. การพิจารณาประสิทธิภาพ
React Router ไม่เพียงแค่ทำให้การทำเว็บ ReactJS และทำแอพเป็นเรื่องง่าย นอกจากนี้ยังมีคุณสมบัติในตัวที่ช่วยเพิ่มประสิทธิภาพการทำงานของแอปพลิเคชันของคุณ หนึ่งในนั้นคือการโหลดแบบ Lazy Loading ซึ่งเป็นรูปแบบการออกแบบที่ชะลอการโหลดทรัพยากรที่ไม่สำคัญในเวลาโหลดหน้าเว็บ แต่จะมีการโหลดทรัพยากรเหล่านี้ในเวลาที่จำเป็นแทน
ตัวอย่างเช่น พิจารณาแอปพลิเคชันที่มีหลายเส้นทาง ซึ่งแต่ละเส้นทางสอดคล้องกับหน้าที่แตกต่างกัน ตามค่าเริ่มต้น เมื่อผู้ใช้เข้าชมหน้าหนึ่ง ส่วนประกอบของหน้าอื่นๆ ทั้งหมดจะถูกโหลดลงในหน่วยความจำด้วย ซึ่งอาจทำให้เวลาในการโหลดหน้าเริ่มต้นช้าลง แต่ด้วยการโหลดแบบ Lazy Loading ของ React Router คุณสามารถตั้งค่าเพื่อให้คอมโพเนนต์สำหรับหน้าใดหน้าหนึ่งโหลดเฉพาะเมื่อผู้ใช้ไปที่หน้านั้นเท่านั้น
นี่คือวิธีที่คุณสามารถนำไปใช้ได้:
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Suspense>
</Router>
);ในตัวอย่างนี้lazy()ฟังก์ชันอนุญาตให้เราแสดงการนำเข้าแบบไดนามิกเป็นส่วนประกอบปกติ คอมโพเนนต์Suspenseจะรวมเส้นทางของเราและแสดง UI ทางเลือกหากส่วนประกอบยังไม่พร้อมที่จะแสดงผล
React Router เป็นเครื่องมือที่จำเป็นสำหรับการทำเว็บ ReactJS และทำแอพมี API ที่ทรงพลังและใช้งานง่ายสำหรับจัดการการกำหนดเส้นทางในแอปพลิเคชันของคุณ ทำให้ง่ายต่อการเพิ่มมุมมองใหม่และควบคุมโฟลว์ของแอปพลิเคชันของคุณ ไม่ว่าคุณกำลังสร้างบล็อกอย่างง่ายหรือแอปพลิเคชันหน้าเดียวที่ซับซ้อน React Router มอบเครื่องมือที่จำเป็นในการสร้างประสบการณ์ผู้ใช้ที่ยอดเยี่ยม
React Router มีบทบาทที่ขาดไม่ได้ในการทำเว็บ ReactJS และทำแอพ ซึ่งนำเสนอเครื่องมือที่ครอบคลุมสำหรับนักพัฒนาในการนำลอจิกการกำหนดเส้นทางไปใช้ในแอปพลิเคชันของพวกเขา คุณสมบัติที่หลากหลายและเทคนิคการเพิ่มประสิทธิภาพที่ยอดเยี่ยมช่วยในการทำเว็บ ReactJS และทำแอพที่มีประสิทธิภาพและเป็นมิตรกับผู้ใช้ ด้วยการใช้ประโยชน์จากพลังของ React Router นักพัฒนาสามารถทำเว็บ ReactJS และทำแอพที่แข็งแกร่ง ปรับขนาดได้ และทรงพลังได้อย่างง่ายดาย ทำให้เป็นส่วนสำคัญของชุดเครื่องมือของนักพัฒนา React