การสร้างเส้นทางหลักใน React Router

บ่อยครั้งที่เส้นทางหลักซึ่งนำไปยังหน้าแรก ถูกเรียกว่าเส้นทางราก (root route) เนื่องจากเส้นทางอื่นๆ จะเรนเดอร์อยู่ ภายในมัน สะดวกมากถ้าจะแสดงมันเป็น คอมโพเนนต์แยกต่างหาก ดังนั้นเรามาเริ่มจาก แอปพลิเคชันของเราอีกครั้งและในโฟลเดอร์ src สร้างโฟลเดอร์อีกหนึ่งโฟลเดอร์และตั้งชื่อว่า routes ตอนนี้ในโฟลเดอร์นี้ให้สร้างไฟล์ root.jsx สำหรับ React คอมโพเนนต์แยก Root รหัส ในไฟล์จะมีหน้าตาดังนี้:

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

และตอนนี้เรามาแก้ไขโค้ดส่วนหนึ่ง ในไฟล์ main.jsx เนื่องจากเป็น ค่าของ element ตอนนี้เรา จะส่งคอมโพเนนต์ Root แทน และเนื้อหาของมันตอนนี้อยู่ใน ไฟล์แยก root.jsx:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
	},
]);

อย่าลืมบรรทัดนำเข้าคอมโพเนนต์ของเรา ใน main.jsx:

import Root from './routes/root';

เปิดแอปพลิเคชันที่คุณสร้างไว้ใน แบบฝึกหัดของบทเรียนที่ผ่านมา สร้าง คอมโพเนนต์ React แยกสำหรับเส้นทางหลัก Root ในไฟล์แยก root.jsx ตามที่อธิบายใน บทเรียนนี้ นำการเปลี่ยนแปลงไปยังไฟล์ main.jsx ของคุณ