延迟加载：react-loadable无法加载其他文件夹中的组件

Question

Using Create-react-app, I want to lazy load some of my components, this is working fine as long as the components are in the same folder as my main component (where I define the routes) however as soon as I want to load a component from another folder like

loader: () => import("../containers/HomeAContainer")

it fails to find/import the module. (exact same module will work if I move the file!

I have made a complete example which can be seen here

• I have also tried to change the route to src/x/x instead of ../x/x but again getting errors.

Answer 1

The way i create lazy loading components is through a higher order component. I create a file called " asyncComponent ", then i put in the code:

import React, { Component } from 'react';

const asyncComponent = ( importComponent ) => {
    return class extends Component{
        state = { component: null }

        componentDidMount(){
            importComponent().then(cmp =>{
                this.setState({component: cmp.default});
            });
        }

        render (){
            const C = this.state.component;
            return C ? <C {...this.props} /> : null;
        }
    }
}

export default asyncComponent;

This component will receive a function as a parameter and then return the component you want. The function is actually a import funcion with the path of your component that you want to lazy load. So instead of using:

import Exemple from './example/example';

You will use:

import asyncComponent from './asyncComponent';
const asyncExample = asyncComponent(()=>{
    return import('./example/example');
});

Answer 2

您使用了错误的路径，请使用以下命令进行更正：

{ path: "/c", component: "./containers/HomeAContainer" }