Ленивая загрузка компонента ReactJS

Question

Я создаю SPA (одностраничное приложение), используя React и React-Router. "Сотрудники" - это один из пунктов меню навигации в заголовке. Согласно документации - Разделение кода на основе маршрутов, я пытаюсь сделать компоненты ленивой загрузкой следующим образом:

import React, { Component, lazy, Suspense } from 'react';
import './App.css';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
...
// import { Employees } from './components/Employees/Employees';
const Employees = lazy(() => import('./components/Employees/Employees'));

export default class App extends Component {
  state = {
    ...
    employeesData: [
        ...objects with data...
    ]
  }

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          ...
          <Suspense fallback={<div>Loading...</div>}>
          <Switch>
        
            {/* other routes here */}
           
            <Route path="/employees/" component={
              () =>
                <Employees
                  data={this.state.employeesData}
                />
            } />

          </Switch>
          </Suspense>
          ...
        </div>
      </BrowserRouter>
    );
  }
}

Employees компонент выглядит так:

import React from 'react';
import './css/Employees.css';

export const Employees = (props) => {

    const { data } = { ...props };

    // sort elements by name value
    data.sort(
        (a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0)
    );

    let items = [];    
    
    for (let i = 0; i < data.length; i++) { 
        items.push(
            <div className="container">
                <div className="imgbox">
                    <img className="image"
                        src={ data[i].image }
                        alt={ data[i].name }                        
                    />                    
                </div>
                <div className="textbox">
                    <h4 className="name">
                        { data[i].name }
                    </h4>
                    <p className="text">
                        { data[i].title }
                        <br/>
                        { data[i].text }
                        <br/>
                        { data[i].workplace }                            
                    </p>
                </div>
            </div>
        );
    }

    return (
        <div className="Employees">
            ...

            <div className="wrapper">
                ...

                { items }

            </div>
        </div>
    )
};

Дело в том, что при нажатии на навигационный пункт "Сотрудники" веб-страница становится пустой. Что я делаю не так?

Предупреждение: ленивый: ожидался результат динамического вызова import(). Вместо этого получили: [модуль объекта] Ваш код должен выглядеть так: const MyComponent = lazy(() => import('./MyComponent'))

Answer 1

Он говорит, что ожидает, что компонент "Сотрудники" будет экспортом файла по умолчанию. Вам нужно будет изменить его на экспорт по умолчанию: https://reactjs.org/docs/code-splitting.html

Answer 2

Две вещи.

1. Использовать render опора вместо component в этой ситуации (Router).
2. Завернуть в Suspense только твой Employees вместо всего Switch (внутри твоего render опора).

Answer 3

React.lazy в настоящее время поддерживает только экспорт по умолчанию. Если модуль, который вы хотите импортировать, использует именованный экспорт, вы можете создать промежуточный модуль, который повторно экспортирует его по умолчанию. Это гарантирует, что тряска дерева продолжит работать, и что вы не втянете неиспользуемые компоненты.

Итак, экспортируйте компонент "Сотрудники", чтобы он был экспортом по умолчанию для такого файла, как этот, сначала создайте файл, в который вы экспортируете все свои компоненты, а затем экспорт по умолчанию.

// MyComponents.js

export const Employees = /* ... */;
export const MyUnusedComponent = /* ... */;

а потом

// Employees.js
export { Employees as default } from "./Employees.js";

а затем импортировать вот так

// Your App.js file
import React, { lazy } from 'react';
const Employees = lazy(() => import("./Employees.js"));