1

使用 Create-react-app,我想延迟加载我的一些组件,只要这些组件与我的主要组件(我在其中定义路由)位于同一文件夹中,它就可以正常工作,但是只要我想加载来自另一个文件夹的组件,例如

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

它无法找到/导入模块。(如果我移动文件,完全相同的模块将起作用!

我做了一个完整的例子,可以在这里看到

  • 我还尝试将路由更改为 src/x/x 而不是 ../x/x 但再次出现错误。
4

2 回答 2

1

我创建延迟加载组件的方式是通过高阶组件。我创建了一个名为“ asyncComponent ”的文件,然后我输入了代码:

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');
});
于 2018-03-22T11:54:00.247 回答
1

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

{ path: "/c", component: "./containers/HomeAContainer" }
于 2018-10-10T09:17:20.100 回答