Как передавать данные через loader в data маршрутах?
Этот вопрос проверяет понимание работы 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.
Преимущества:
- Сокращение времени рендеринга, так как данные загружаются до показа компонента.
- Централизованная обработка данных маршрутов.