Многие разработчики продолжают использовать хуки
useState и useEffect для обновления состояний, но мне такой подход не нравится. Проблема заключается в том, что компонент одновременно монтируется, перемонтируется и размонтируется, что приводит к неожиданному поведению. В результате при записи в консоль результат может быть повторен три раза.Назначение хука useLoaderData
Хук
useLoaderData — это пользовательский хук в React, который помогает загружать данные в компонент. Он упрощает получение данных из API и выполнение асинхронных операций.Используя хук
useLoaderData, вы предоставляете ему функцию, которая возвращает промис. Этот промис представляет собой асинхронную операцию, в результате которой будут получены необходимые данные. Как только промис разрешится, данные станут доступны компоненту.Хук
useLoaderData обрабатывает состояние загрузки, поэтому вам не нужно вручную отслеживать, загружаются ли еще данные или их загрузка уже закончена. Он предоставляет удобный способ доступа к данным, а также позволяет устранять возможные ошибки, которые могут возникнуть при загрузке данных.Хук
useLoaderData позволяет сохранить чистоту и организованность кода компонента, отделяя логику загрузки данных от остальных задач компонента. Это позволяет легко получать данные и управлять ими более удобным для новичков способом.Как это работает
Надеюсь, вы хорошо знаете, как функционирует
React Router 6. В противном случае ознакомьтесь с документацией по ссылке.Прежде всего, нам необходимо настроить систему маршрутизации в приложении для работы с API загрузчика. До этого момента мы использовали настройку
BrowserRouter для работы с различными маршрутами приложения.Обсудим этот фрагмент.
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom"
import HomeComponent from "./home"
import AboutCompoent from "./about"
function App () {
<BrowserRouter>
<Routes>
<Route path='/' element={<Outlet />}>
<Route index element={<HomeComponent /> } />
<Route path='about' element={<AboutComponent/> } />
</Route>
</Routes>
</BrowserRouter>
};
export default App;
Здесь создана традиционная система маршрутизации с использованием импорта из React Router.Что тут происходит?
BrowserRouter из библиотеки React Router создает массив объектов из дочерних элементов Routes. Приведенный ниже фрагмент наглядно демонстрирует, как это происходит.
BrowserRouter([
{
path: '/',
element: <HomeComponent />,
children: []
},
{
path: '/about',
element: <AboutComponent/>,
children: []
}
])
📌 Читать дальше
@react_tg