Laluan dalam React Router

Laluan (Routes) merupakan bahagian paling penting dalam aplikasi React Router. Mari kita lihat sebahagian kod dari pelajaran lepas:

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

Jadi, sifat objek path dan element yang kita hantar ke fungsi ketika mencipta penghala, itulah sifat objek Route. Sebenarnya, objek ini mempunyai banyak sifat, anda boleh mencarinya dalam dokumentasi rasmi. Pada masa hadapan, beberapa daripadanya akan berguna untuk kita:

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>;
}

Anda boleh menggunakan gaya JSX alternatif dan menulis sifat sebagai prop untuk komponen Route, maka sebahagian kod kita akan kelihatan seperti ini:

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

Dan, sudah tentu, kita perlu menambah beberapa baris lagi dalam import:

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

Kedua-dua gaya yang ditunjukkan dalam pelajaran adalah setara. Kami pada masa hadapan akan berpegang pada pilihan pertama.

Ambil aplikasi yang anda buat dalam tugasan untuk pelajaran lepas. Cuba tulis semula sebahagian kod untuk mencipta penghala (yang lama sila komenkan buat sementara waktu), menggunakan sintaksis JSX alternatif yang ditunjukkan dalam pelajaran. Pastikan aplikasi berfungsi.

Kembalikan semua kod lama ke tempatnya, dan buang yang baru. Pastikan aplikasi berfungsi.