Question

我正在构建模块化React应用。但是我遇到了一个问题，我无法动态导入应用程序的路由。想象一下：

app ├── app.js └── modules ├── module_1 │ └── routes.js ├── module_2 │ └── routes.js └── module_3 └── routes.js

想象一下所有包含以下内容的route.js文件：

//modules/module_*/route.js
import React, { Fragment } from 'react';
import { Route } from 'react-router-dom';

export default () => {
    <Route path="/module/path" component={ModuleComponent}>
};

然后我将在我的app.js中执行以下操作：

const Routes = import('modules/**/routes.js');

const App = () => (
   <BrowserRouter>
       <Routes />
   </BrowserRouter>
);
export default App;

现在，我正在运行一个单独的节点脚本，该脚本为al.routes.js文件创建索引文件，但这变得很乏味。我希望可能会有更好的方法

Answer 1

在要从中导出内容的每个文件夹中以及所需的结构中创建一个index.js。

例如，您可以在每个模块中使用export * from './routes'，然后依次将其导出到modules文件夹中，例如

import route1 from './module_1';
import route2 from './module_2';
import route3 from './module_3';
export const routes = [route1, route2, route3];

然后在您的app.js中将您import { routes } from './modules用于以下目的：

{routes.map((route, i) => <Routes key="{i}"/>)}

Answer 2

npm软件包import-glob确实完成了我要实现的目标。

-编辑---

该软件包基本上执行@E的操作。桑丁在他的帖子中描述。基本上，您可以将该包作为预加载器添加到JavaScript文件中，从而可以

import modules from "./foo/**/*.js";

然后程序包将其扩展为：

import * as module0 from "./foo/1.js";
import * as module1 from "./foo/bar/2.js";
import * as module2 from "./foo/bar/3.js";

modules = [module0, module1, module2]

导入多个文件

2 个答案: