[英]How do you load React components asynchronously based on different server side states?
I want to be able to load React components asynchronously based on different user types. 我希望能够基于不同的用户类型异步加载React组件。 For example, as User A navigates around the app, their set of components are loaded via async.
例如,当用户A在应用程序中导航时,它们的组件集将通过异步加载。 Then when User B uses the app they received a different set of components also loaded via async.
然后,当用户B使用该应用程序时,他们收到了一组同样通过异步加载的组件。
At the moment I'm using React Router and Redux. 目前,我正在使用React Router和Redux。 I also use Webpack to create component chunks which load async like this:
我还使用Webpack来创建组件块,这些组件将异步加载,如下所示:
<Route
path="/"
getComponent={(location, callback) => {
require.ensure([], (require) => {
callback(null, require('./app/App.jsx').default);
}, 'App');
}}
>
But when I try to expand this to dynamically load the components it doesn't work. 但是,当我尝试扩展它以动态加载组件时,它不起作用。 I've created an array of objects which contains all the components I want to load...
我创建了一个对象数组,其中包含我要加载的所有组件...
{
components: [
{
id: 0,
name: 'Dashboard',
src: './dashboard/Dashboard.jsx',
indexRoute: true,
path: '/',
},
{
id: 1,
name: 'Quote',
src: './quote/Quote.jsx',
indexRoute: false,
path: '/quote',
},
],
}
I then use map to create routes for each one of these components... 然后,我使用map为这些组件中的每个组件创建路线。
const routes = components.map((component) => {
if (component.indexRoute) {
return (
<IndexRoute
getComponent={(location, callback) => {
require.ensure([], (require) => {
callback(null, require(component.src).default);
}, component.name);
}}
key={component.id}
/>
);
}
return (
<Route
path={component.path}
getComponent={(location, callback) => {
require.ensure([], (require) => {
callback(null, require(component.src).default);
}, component.name);
}}
key={component.id}
/>
);
});
But when I insert my created routes into the main route... 但是当我将创建的路线插入主路线时...
<Route
path="/"
getComponent={(location, callback) => {
require.ensure([], (require) => {
callback(null, require('./app/App.jsx').default);
}, 'App');
}}
>
{routes}
</Route>
I get the following error: 我收到以下错误:
Uncaught TypeError: __webpack_require__(...).ensure is not a function
and warning: 和警告:
require function is used in a way in which dependencies cannot be statically extracted
I presume this is because Webpack needs to know what chunks it has to compile at build time? 我认为这是因为Webpack需要知道在构建时必须编译哪些块? Is this the problem and is there a way round this?
这是问题吗,有办法解决吗? Or even a better solution?
甚至更好的解决方案?
Thanks 谢谢
For anyone who comes across this at a later stage, I managed to work around this by creating a object with all the async components my app could possibly load. 对于以后遇到此问题的任何人,我都设法通过创建一个包含我的应用程序可能会加载的所有异步组件的对象来解决此问题。 Each components route definition has it's require.ensure function defined like such...
每个组件路由定义都有它的require.ensure函数,定义如下:
const asyncComponents = [
{
id: 0,
name: 'Dashboard',
require: (location, callback) => {
require.ensure([], (require) => {
callback(null, require('./dashboard/Dashboard.jsx').default);
}, 'Dashboard');
},
},
];
export default asyncComponents;
Doing it this way will inevitably face scaling problems at some point as you have to maintain a separate list of all your components. 这样做将不可避免地会在某些时候遇到扩展问题,因为您必须维护所有组件的单独列表。 It works for now though.
它现在可以使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.