Как React Router грузит модули? Можно ли сделать полосу загрузки?

Question

Я навичок в React и хотелось бы знать как React Router грузит компоненты и можно ли сделать полосу состояния загрузки? Если да, то как?

Насколько я понимаю React Router грузит html страницы с Frontend сервера, а значит можно сделать прелоадер.

Возможно это не так и при открытии страницы все модули уже загружены и он просто их меняет?

Буду благодарен за ответ.

Answer 1

Да можно при помощи lazy loading:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'; 

const Drums = lazy(() => import('./components/Drums'));  // import
const Draw = lazy(() => import('./components/Draw'));    // import

const App = () => {        
  return (
    <div>
     <Router>
      <Route path="/" component={Header} />       
      <Suspense fallback={<h1>Loading...</h1>}>   {/* Lazy Loading Spinner */}        
        <Route path="/drums" component={Drums} />
        <Route path="/draw" component={Draw} />
        <Redirect to="/" />  
      </Suspense>
     </Router>
    <div>
   )
 }

без lazy loding всё грузится сразу.

БЛОГ НА HUSL

Как React Router грузит модули? Можно ли сделать полосу загрузки?

Ответы (1 шт):