Rutter i React Router

Rutter (Routes) är den viktigaste delen av ett React Router-program. Låt oss titta på en bit kod från föregående lektion:

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

Så, egenskaperna path och element, som vi skickade till funktionen när vi skapade routern, är egenskaperna för objektet Route. Egentligen har detta objekt många egenskaper, de kan hittas i den officiella dokumentationen. I framtiden kommer några av dem att vara användbara för oss:

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

Man kunde ha använt en alternativ JSX-stil och skrivit egenskaperna som props för Route-komponenten, då skulle vår kodbit ha sett ut så här:

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

Och, naturligtvis, skulle man ha behövt lägga till några rader till i importen:

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

Båda stilarna som presenteras i lektionen är likvärdiga. Vi kommer i fortsättningen att hålla oss till det första alternativet.

Ta applikationen du skapade i uppgifterna till tidigare lektioner. Försök skriva om kodbiten för att skapa routern (kommentera bort den gamla för tillfället), med hjälp av den alternativa JSX-syntaxen som presenterades i lektionen. Se till att applikationen fungerar.

Återställ all gammal kod på sin plats, och ta bort den nya. Se till att applikationen fungerar.