Как в React Router Dom задать отображение заместителя (fallback) для ленивой (lazy) компоненты?

Question

Рубен

react

Как в React Router Dom задать отображение заместителя (fallback) для ленивой (lazy) компоненты?

Как можно вставить элемент Fallback для отображения загрузочного экрана, пока загружается новый бандл с лениво загружаемыми компонентами, применяя подход с асинхронным загрузчиком lazy, без использования Suspense?

4 мая 2024 г. 20:00

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для этого можно использовать библиотеку react-loadable. Вот пример:

```jsx
import Loadable from 'react-loadable';

const Fallback = () => (
  <div>Loading...</div>
);

const LazyComponent = Loadable({
  loader: () => import('./LazyComponent'),
  loading: Fallback,
});

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={LazyComponent} />
    </Switch>
  </Router>
);
```

В этом примере, если компонент `LazyComponent` еще не загружен, будет отображаться компонент `Fallback`. Как только компонент `LazyComponent` будет загружен, он отобразится на странице.