React+TypeScript模块多默认导出报错，如何导出两个页面组件？

问题出在Create目录下的index.ts重复导出了default模块——每个模块只能有一个default导出，多次导出会导致冲突报错。按以下步骤修改即可实现两个组件的正确导出：

1. 修改Create目录下的index.ts #

将重复的default导出改为命名导出，给每个组件指定明确的名称：

export { default as Create } from "./Create";
export { default as SuccessPage } from "./SuccessPage";

（注：SuccessPage.tsx中默认导出的类名为Success，这里用文件名SuccessPage作为导出名称，保持命名一致性，方便后续引用）

2. 修改Components目录下的index.ts #

从Create模块导入两个命名导出的组件，再统一向外导出：

export { Create, SuccessPage } from "./Create";

3. 验证引用方式 #

此时项目根目录的index.ts可以通过以下方式导入两个组件：

import { Create, SuccessPage } from './src';

src目录下的index.ts无需修改，export * from './components';会自动转导Components模块的所有导出内容。

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