เส้นทางดัชนีใน React Router

ในบทเรียนนี้ เราจะได้เรียนรู้ว่า เส้นทางดัชนีคืออะไร

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

เรามาสร้างไฟล์ index.jsx ในโฟลเดอร์ routes และในนั้นสร้างคอมโพเนนต์ Index:

export default function Index() {
	return (
		<div>
			<p>สวัสดี, React Router!</p>
			<p>นี่คือแอปพลิเคชันสำหรับสินค้าของฉัน :)</p>
		</div>
	);
}

ตอนนี้ให้ไปที่ main.jsx และ นำเข้าคอมโพเนนต์ของเรา Index ไปที่นั่น:

import Index from './routes/index';

และเพิ่มอ็อบเจ็กต์เข้าไปในอาร์เรย์ children เป็นอันดับแรก โดยที่พร็อพเพอร์ตี้ index ถูกตั้งค่าเป็น true และสำหรับองค์ประกอบ ที่จะแสดงจะเป็นคอมโพเนนต์ของเรา Index:

{ index: true, element: <Index /> },

นำแอปพลิเคชันที่คุณสร้างขึ้นใน แบบฝึกหัดของบทเรียนที่แล้วมาใช้ ใช้เนื้อหาจากบทเรียน เพิ่มเส้นทางดัชนีที่อยู่หน้าหลักพร้อมกับ ข้อความใดข้อความหนึ่ง