Как передавать данные через loader в data маршрутах?

Question

loader в data маршрутах используется для загрузки данных перед рендерингом компонента. Он возвращает данные, которые затем доступны через хук useLoaderData внутри компонента.

YeaHub · Accepted Answer

Определение 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: , loader: fetchData, }, ]); const App = () => ;Получение данных в компоненте:Используйте хук useLoaderData:import { useLoaderData } from 'react-router-dom'; const Home = () => { const data = useLoaderData(); return

{JSON.stringify(data)}

; };Обработка ошибок:Если loader выбрасывает ошибку, срабатывает errorElement.Преимущества:Сокращение времени рендеринга, так как данные загружаются до показа компонента.Централизованная обработка данных маршрутов.