Я начал проходить React-Router и сначала разобрал обычный способ как сделать роутинг, как работать с сетевыми запросами и тд, выглядит примерно так:
<BrowserRouter>
<div className="app">
<AppHeader/>
<main>
<Routes>
<Route path='/' element={<MainPage/>}>
<Route path='react' element={<CommonPage/>} />
</Route>
<Route path='charackters/:personId' element={<PersonPage/>} />
<Route path='*' element={<Error404Page/>} />
</Routes>
</main>
</div>
</BrowserRouter>
всё понятно, роутинг выглядит просто, с async-функциями тоже всё понятно - например если это запрос к API, то просто пишешь эту функцию в нужном компоненте в useEffect(), если нужна отложенность - юзаешь lazy(() => ), полученный результат записываешь в state и дальше с ним уже работаешь. Ну по крайней мере это пока всё что делал
Но недавно я разобрал новый способ создания Роутинга, который появился в версии 6.4, относительно недавно. Сами роуты теперь пишутся в другой структуре(App.jsx) и с async-функциями в Компонентах тоже теперь предлагают(разработчики ReactRouter-a) работать по другому, через loader-ы, defer, useLoaderData() и тд. Разбирал я это всё 2 дня, вроде +- разобрался. Но как бы вопрос сам же напрашивается - структура и логика очень сильно усложнились, а каких-то видимых изменений я назвать не могу.
// App.jsx
import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<Root />}>
<Route
path="dashboard/:id"
element={<Dashboard />}
loader={getDeferData}
errorElement={<ErrorPage />}
/>
</Route>
)
)
const App = () => {
return (
<RouterProvider router={router} />
)
}
// Dashboard.jsx
import {useLoaderData, defer} from "react-router-dom";
export const Dashboard = () => {
const {posts} = useLoaderData() // - хук useLoaderData() читает значение, возвращаемое из defer( {} )
return (
<div>
<Suspense fallback={ <h2>Post is loading...</h2> }>
<Await
resolve={posts}
errorElement={ <p>Error loading package location!</p> }
>
{
(resolvedPosts) => {
resolvedPosts.map(post => {
return (
<Link to={`dashboard/${post.id}`}>
<li
className="dashboard__item"
key={post.id}
>
{post.title}
</li>
</Link>
)
})
}
}
</Await>
</Suspense>
</div>
)
}
Объясните пожалуйста, в чём плюсы создания роутинга/работы с async-функциями этим новым, сложным способом? Желательно как-то понятно объяснить, потому что нейронка мне тоже объясняла, но общими сложными фразами, где не было никакой сути, в доках тоже самое
