React Router配置下实现组件懒加载的异步组件写法疑问

嘿，我看了你的代码，目前的实现方式存在几个关键问题，导致运行时抛出异常，咱们一步步拆解：

1. 错误的asyncComponent调用方式 #

你写的const Home = asyncComponent.moduleProvider(import('./components/Home'));是完全错误的——asyncComponent是一个React组件类，它需要通过props接收moduleProvider这个异步加载函数，而不是直接调用它的静态方法（实际上你的组件也没定义这个静态方法）。

2. 废弃的生命周期函数 #

componentWillMount已经被React官方废弃，而且在SSR场景下，这个钩子会在服务端执行，但异步import的Promise在服务端不会完成，会导致服务端渲染出空内容，后续客户端 hydration 时出现不匹配的错误。

修正后的基础实现（客户端场景） #

我们可以把asyncComponent改成更易用的高阶组件（HOC），这样用法更符合React的习惯：

asyncComponent.js

import React, { Component } from 'react';

// 接收一个异步加载组件的函数作为参数
export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {
        // 存储加载后的组件
        component: null
      };
    }

    // 改用componentDidMount，仅在客户端执行
    componentDidMount() {
      importComponent()
        // 注意：默认导出的组件需要取mod.default，兼容具名导出的情况
        .then(mod => this.setState({ component: mod.default || mod }));
    }

    render() {
      const LoadedComponent = this.state.component;
      // 加载完成前可以返回加载中占位组件，比如<div>Loading...</div>
      return LoadedComponent ? <LoadedComponent {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}

Route.js

import React from 'react';
import App from './app';
import asyncComponent from './asyncComponent';

// 直接把异步加载函数传给asyncComponent
const Home = asyncComponent(() => import('./components/Home'));

const routes = [{
  component: App,
  routes: [
    { path : '/', exact: true, component: Home }
  ]
}];

export default routes;

SSR场景下的特殊处理 #

如果你是在**服务端渲染（SSR）**环境中使用，上面的基础实现依然会有问题——因为服务端不会执行componentDidMount，导致服务端渲染出空内容，客户端 hydration 时出现DOM不匹配。

这种情况下更推荐使用专门支持SSR的懒加载库，比如@loadable/component：

1. 安装依赖：

npm install @loadable/component @loadable/server

2. 组件侧用法：

import loadable from '@loadable/component'

// 定义懒加载组件
const Home = loadable(() => import('./components/Home'))

3. 服务端渲染时，需要配合@loadable/server预加载所有路由对应的组件，确保服务端能渲染出完整的内容，避免 hydration 错误。

内容的提问来源于stack exchange，提问作者Torrezzzz