React Route v6+TypeScript路由懒加载实现报错咨询

在React Router v6中，Route的element属性要求传入ReactNode类型（合法的React元素），你直接传() => import('user/App')会报错，因为这是一个返回Promise的函数，不符合类型要求。正确的做法是结合React.lazy和Suspense来实现懒加载：

1. 用React.lazy包装动态导入 #

React.lazy专门用来创建懒加载组件，它接受一个返回Promise的函数，这个Promise需要resolve出一个默认导出的React组件：

import { lazy } from 'react';

// 懒加载user/App组件（确保该组件是默认导出）
const UserApp = lazy(() => import('user/App'));

如果你的组件是命名导出，需要调整导入逻辑：

const UserApp = lazy(() => 
  import('user/App').then(module => ({ default: module.UserApp }))
);

2. 用Suspense提供加载状态 #

懒加载组件在加载过程中会处于pending状态，必须用Suspense包裹，指定fallback内容（比如加载动画、文字）避免报错：

import { Routes, Route, Suspense } from 'react-router-dom';
import { lazy } from 'react';

const UserApp = lazy(() => import('user/App'));

function AppRouter() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/" element={<UserApp />} />
        {/* 其他路由 */}
      </Routes>
    </Suspense>
  );
}

export default AppRouter;

类型说明 #

TypeScript会自动推导React.lazy返回的组件类型，不需要额外定义。如果需要显式指定组件props类型，可以这样写：

import { lazy, ComponentType } from 'react';

type UserAppProps = {
  // 定义组件的props类型
};

const UserApp: ComponentType<UserAppProps> = lazy(() => import('user/App'));

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