Question

使用Create-react-app，我想延迟加载我的一些组件，只要组件与我的主要组件（我定义路由）位于同一文件夹中，这样就可以了。但是，只要我想要从其他文件夹加载组件，如

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

无法找到/导入模块。（如果我移动文件，完全相同的模块将起作用！

我已经做了一个完整的例子，可以看到here

我也尝试将路由更改为src / x / x而不是../x/x但是再次出错。

Answer 1

我创建延迟加载组件的方式是通过更高阶的组件。我创建了一个名为＆＃34; asyncComponent ＆＃34;的文件，然后我输入了代码：

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;

此组件将接收函数作为参数，然后返回所需的组件。该函数实际上是一个导入函数，其中包含您想要延迟加载的组件路径。所以不要使用：

import Exemple from './example/example';

您将使用：

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

Answer 2

您使用了错误的路径，请使用：

对其进行更正。

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

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

2 个答案: