@awenn2015
Веб-программист самоучка

Как в react-router-dom lazy компоненте показать fallback элемент?

Приветствую, вопрос мой такой, давичи вычитал в доке react-router-dom что компоненты можно лениво грузить не только так

import { lazy, Suspense } from 'react'
import Fallback from '~templates/Fallback.tsx'

const LazyComponent = lazy(() => import('./.../LazyComponent'))

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <Suspense fallback={<Fallback />}>
        <LazyComponent />
      </Suspense>
    )
  }
])


Но и так

const router = createBrowserRouter([
  {
    path: '/',
    lazy: async () => {
      const Component = await import('./.../LazyComponent')
      return { Component: Component.default }
    }
  }
])


Подход довольно так интересный и позволяет реэкспортить группу lazy компонентов (если нужно грузить не по одному компоненту а пачку за раз), но у меня сразу возник закономерный вопрос, как показывать Fallback элемент пока загружается новый бандл, Suspense явно тут нигде не засунешь, вот и думаю как его пристроить, есть у кого идеи? пока что пытаюсь за костылить с помощью loader
  • Вопрос задан
  • 26 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Else Ростов-на-Дону
от 150 000 до 200 000 ₽
OWNR SOLUTIONS Нижний Новгород
от 150 000 до 250 000 ₽
FedAG Москва
До 40 000 ₽