เส้นทางใน React Router

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

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

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

interface 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 ได้ จากนั้นโค้ดส่วนของเราจะมีลักษณะดังนี้:

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

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

import {
	createRoutesFromElements,
	createBrowserRouter,
	RouterProvider,
	Route,
} from 'react-router-dom';

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

นำแอปพลิเคชันที่คุณสร้างในการมอบหมายของบทเรียนที่ผ่านมา ลองเขียนโค้ดส่วนสำหรับสร้างเราเตอร์ใหม่ (ให้คอมเมนต์โค้ดเดิมไว้ก่อน) โดยใช้ไวยากรณ์ JSX แบบอื่นที่แสดงในบทเรียน ตรวจสอบให้แน่ใจว่าแอปพลิเคชันทำงานได้

นำโค้ดเดิมทั้งหมดกลับที่เดิม และลบโค้ดใหม่ออก ตรวจสอบให้แน่ใจว่าแอปพลิเคชันทำงานได้