@Danila232

В чём плюсы делать React-Routing через createBrowserRouter/defer/loader версии 6.4?

Я начал проходить 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-функциями этим новым, сложным способом? Желательно как-то понятно объяснить, потому что нейронка мне тоже объясняла, но общими сложными фразами, где не было никакой сути, в доках тоже самое
  • Вопрос задан
  • 69 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы