Question

在foo下面给出一个文件夹src：

.src
..App.js
..foo
...ComponentBah.js
...ComponentFoo.js
...ComponentBaz.js
...ComponentBar.js

每个组件Bah，Foo等都导出与其文件名匹配的组件，例如ComponentBah.js导出ComponentBah。我想在Route中编写一个App.js，根据其名称从/src/foo 加载任意组件。如果将组件ComponentTau添加到文件夹foo，则某些URL（例如/path/to/route/ComponentTau）将加载该组件，而无需更新App.js

Answer 1

在index.js内创建文件foo，如下所示：

export default [
    'ComponentBah',
    'ComponentFoo',
    'ComponentBaz',
    'ComponentBar'
]

现在，您可以按照以下步骤在主路由器中动态添加这些组件作为路由：

import React, { Suspense, lazy } from 'react';
import routes from './path/to/route';
const routeMap = {};

routes.forEach((route) => {
  routeMap[route] = lazy(() => import(`./path/to/route/${route}`));
});

function withSuspense(WrappedComponent) {
  return function(props) {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <WrappedComponent {...props} />
      </Suspense>
    );
  };
}

function Router() {
  return (
    <BrowserRouter>
      <div>
        {routes.map(route => (
          <Route path={`/path/to/route/${route}`} component={routeMap[route]} />
        ))}
      </div>
    </BrowserRouter>
  );
}

但是这种方法有两个陷阱：

对于每个新文件，您仍然需要在index.js中添加一个条目文件。
~~由于该文件夹中的所有文件都需要静态导入，因此您可能会丢失代码拆分和延迟加载的功能。~~ 代码拆分已在上面完成。

根据文件名从文件夹响应路由到组件

1 个答案: