时间戳

首页 > 解决方案 > 根据文件名从文件夹反应路由到组件

reactjs - 根据文件名从文件夹反应路由到组件

问题描述

foo给定以下文件夹src：

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

每个组件 Bah、Foo 等都导出一个与其文件名匹配的组件，例如ComponentBah.jsexports ComponentBah。我想写一个根据其名称加载任意组件的Routein 。即，如果一个组件被添加到文件夹中，一些 url将加载组件而无需更新App.js/src/foo ComponentTaufoo/path/to/route/ComponentTauApp.js

标签： reactjsreact-router

解决方案

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 文件中添加一个条目。
  • 由于文件夹中的所有文件都需要静态导入，因此您可能会丢失代码拆分和延迟加载。 上面已经完成了代码拆分。

推荐阅读