เส้นทางใน React Router

เส้นทาง (Routes) เป็นส่วนที่สำคัญที่สุดของแอปพลิเคชันบน React Router ลองพิจารณาส่วนโค้ดจากบทเรียนที่แล้ว:

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

คุณสมบัติ path และ element ของวัตถุที่เราส่งผ่านไปยังฟังก์ชันเมื่อสร้างเราเตอร์นั้น เป็นคุณสมบัติของวัตถุ Route จริงๆ แล้ววัตถุนี้มีคุณสมบัติมากมาย สามารถหาได้จาก เอกสารทางการ ต่อไปนี้ บางส่วนจะมีประโยชน์สำหรับเรา:

jsxinterface RouteObject {
  path?: string;
  index?: boolean;
  children?: React.ReactNode;
  caseSensitive?: boolean;
  id?: string;
  loader?: LoaderFunction;
  action?: ActionFunction;
  element?: React.ReactNode | null;
  Component?: React.ComponentType | null;
  errorElement?: React.ReactNode | null;
  ErrorBoundary?: React.ComponentType | null;
  handle?: RouteObject["handle"];
  shouldRevalidate?: ShouldRevalidateFunction;
  lazy?: LazyRouteFunction<RouteObject>;
}

คุณสามารถใช้สไตล์ JSX แบบอื่นและเขียนคุณสมบัติในรูปแบบพร็อพสำหรับคอมโพเนนต์ Route ได้ จากนั้นโค้ดส่วนของเราจะมีลักษณะดังนี้:

main.jsxconst router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path = '/'
      element = {<div>Hello Router!</div>}
    />
  )
);

และแน่นอน คุณจะต้องเพิ่มอีกสองสามบรรทัดในการนำเข้า:

main.jsximport {
  createRoutesFromElements,
  createBrowserRouter,
  RouterProvider,
  Route,
} from 'react-router-dom';

ทั้งสองสไตล์ที่นำเสนอในบทเรียนมีค่าเท่ากัน ต่อไปนี้ เราจะยึดตามตัวเลือกแรก