在 React 中处理多个导入的有效方法

Question

所以我正在 React 上开发一个网站并尝试组织 BrowserRouter，因此对于每个组件（页面），我在 App.js 中创建一个路径，如下所示

<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />

我想添加多个组件来创建多个这样的路线。问题是，是否有一种有效的方法来处理来自仅包含 .js 文件的一个文件夹的多次导入。我有一个文件夹“./articles”，对于我想要导出的每个文件，我现在都这样做

import MyComponent1 from "./articles/MyComponent1.js";

重复这一行仅更改最后一个参数似乎不正确。导入有什么技巧可以提高效率吗？

Answer 1

如果需要，您可以在文章中创建一个 index.js 文件，该文件的唯一工作是收集各种组件并从单个位置导出它们。例如：

// /articles/index.js

export { default as MyComponent1 } from './MyComponent1.js';
export { default as MyComponent2 } from './MyComponent2.js';
export { default as MyComponent3 } from './MyComponent3.js';
export { default as MyComponent4 } from './MyComponent4.js';

// Used in another file:

import { MyComponent1, MyComponent2, MyComponent3, MyComponent4 } from './articles';