Маршруты в React Router
Маршруты (англ. Routes) являются наиважнейшей частью приложения на React Router. Рассмотрим кусочек кода с прошлого урока:
const router = createBrowserRouter([
{
path: '/',
element: <div>Hello Router!</div>,
},
]);
Так вот, свойства объекта path и
element, которые мы передавали в
функцию при создании роутера, и есть
свойства объекта Route. На самом деле,
объект 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 синтаксис, приведенный в уроке. Убедитесь, что приложение работает.
Верните на место весь старый код, а новый уберите. Убедитесь, что приложение работает.