Roetes in React Router

Roetes (Routes) is die belangrikste deel van 'n toepassing op React Router. Kom ons kyk na 'n stukkie kode van die vorige les:

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

Wel, die eienskappe van die voorwerp path en element, wat ons aan die funksie oorgedra het toe ons die router geskep het, is presies die eienskappe van die voorwerp Route. Eintlik, hierdie voorwerp het baie eienskappe, jy kan hulle in die amptelike dokumentasie vind. In die toekoms sal sommige van hulle vir ons van pas kom:

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

Jy kon die alternatiewe JSX-styl gebruik en die eienskappe as props vir die Route-komponent geskryf het, dan sou ons stukkie kode so gelyk het:

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

En, natuurlik, sou ons 'n paar reëls by die invoer moes byvoeg:

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

Albei style wat in die les aangehaal word, is gelykstaande. Ons gaan in die toekoms by die eerste variant hou.

Neem die toepassing wat jy in die opdragte vir vorige lesse geskep het. Probeer om die stukkie kode vir die skepping van die router te herskryf (kommentaar die ou een vir nou uit), deur die alternatiewe JSX-sintaksis te gebruik, wat in die les gegee word. Maak seker dat die toepassing werk.

Plaas al die ou kode terug, en verwyder die nuwe een. Maak seker dat die toepassing werk.