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

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

routes/root.jsxfunction Root() {
  return <div>Hello Router!</div>;
}

export default Root;

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

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

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

main.jsximport Root from './routes/root';