Реагировать Маршрут к компоненту из папки на основе имени файла

Question

Для данной папки foo ниже src:

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

Каждый из компонентов Bah, Foo и т. Д. Экспортирует компонент, соответствующий их имени, например, ComponentBah.js exports 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.
• Поскольку все файлы впапка должна быть статически импортирована, вы можете потерять при разделении кода и отложенной загрузке. Разделение кода было сделано выше.