Маршруты ў 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 сінтаксіс, прыведзены ў уроку. Пераканайцеся, што прыкладанне працуе.

Верніце на месца ўвесь стары код, а новы прыбярыце. Пераканайцеся, што прыкладанне працуе.