javascript - 在反应路由器配置中编写异步组件以进行延迟加载
问题描述
我是新来的反应。尝试延迟加载组件。我正在使用服务器端渲染以及反应路由器配置。我需要延迟加载组件。
asyncComponent.js
import React, { PureComponent } from 'react';
export default class extends PureComponent {
constructor(props) {
super(props);
this.state = {
Component: null
}
}
componentWillMount() {
if(!this.state.Component) {
this.props.moduleProvider().then( ({Component}) => this.setState({ Component }));
}
}
render() {
const { Component } = this.state;
//The magic happens here!
return (
<div>
{Component ? <Component /> : ''}
</div>
);
}
};
路由.js
import React from 'react';
import App from './app';
import asyncComponent from './asyncComponent';
const Home = asyncComponent.moduleProvider(import('./components/Home'));
const routes = [{
component: App,
routes: [
{
path : '/',
exact: true,
component: Home
}
]
}];
export default routes;
我参考了 [ https://github.com/rubenspgcavalcante/react-webpack-lazy-loading.git][1]中的示例
这是抛出异常。这是正确的方法吗?
解决方案
推荐阅读
- javascript - 将 JavaScript 转换为 Iframe 以在 SharePoint 中使用
- flutter - 如何在使用flutter读取或写入firestore之前获取request.auth.uid
- html - 如何同步实时服务器 html 并直接从文件夹同步?
- c# - Google API .NET 引发 UnauthorizedAccessException
- android - 无法呼叫代理 - 适用于 Android 的 MSAL
- c# - 区域在 .netcore 中显示为查询字符串
- apache - 可以通过直接外部IP地址连接到网站,不能通过域
- python - NumPy:矩阵相对于自身的雅可比矩阵和对角矩阵的 2d 扩展
- python - 概念 - 查询数据库和页面提供有限的属性
- java - ArrayIndexOutOfBoundsException: 0 当我尝试访问将数据输入到数组的方法时