Этот вопрос проверяет понимание работы loader для передачи данных в компоненты маршрутов
loader в data маршрутах используется для загрузки данных перед рендерингом компонента. Он возвращает данные, которые затем доступны через хук useLoaderData внутри компонента.
Определение loader:
Это функция, которая асинхронно загружает данные.
const fetchData = async () => {
const response = await fetch('/api/data');
if (!response.ok) throw new Error('Failed to load data');
return response.json();
};Пример использования loader:
Определите маршрут с loader:
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
const router = createBrowserRouter([
{
path: "/",
element: <Home />,
loader: fetchData,
},
]);
const App = () => <RouterProvider router={router} />;Получение данных в компоненте:
Используйте хук useLoaderData:
import { useLoaderData } from 'react-router-dom';
const Home = () => {
const data = useLoaderData();
return <div>{JSON.stringify(data)}</div>;
};Обработка ошибок:
Если loader выбрасывает ошибку, срабатывает errorElement.
Преимущества:
Сокращение времени рендеринга, так как данные загружаются до показа компонента.
Централизованная обработка данных маршрутов.