реагирующий маршрутизатор с асинхронными реактивно-загружаемыми компонентами в цикле / карте

Question

Следуя учебным пособиям, таким как этот Я могу добиться разделения кода и загрузки при помощи реагирующая загрузка ;что-то вроде этого:

const AsyncHome = Loadable({
  loader: () => import("./components/Home"),
  loading: MyLoadingComponent
});
const AsyncContact = Loadable({
  loader: () => import("./components/Contact"),
  loading: MyLoadingComponent
});
...
return (
  <BrowserRouter>
      <Route path="/" exact component={AsyncHome} />
      <Route path="/contact/" component={AsyncContact} />
  </BrowserRouter>
)
...

Поскольку у меня так много маршрутов, я хочу создать централизованный источник информации о маршрутизации.Я создал отдельный объект маршрута (сам по себе) для каждого маршрута, я поместил их все в один объект «Маршруты» и пытаюсь динамически визуализировать маршруты, содержащие асинхронные компоненты, на карте.Я вызываю функцию Loadable внутри свойства компонента компонента Route.Чтобы сделать это с приведенным выше примером будет выглядеть следующим образом:

const Home = {
  route: "/home/",
  path: "./components/Home"
};
const Contact = {
  route: "/contact/",
  path: "./components/Contact"
};
const Routes = {
  Home,
  Contact
};
...
return (
  <BrowserRouter>
    {
      Object.values(Routes).map(e => {
      return (
        <Route
          key={e.route}
          path={e.route}
          exact
          component={Loadable({
              loader: () => import(e.path),
              loading: MyLoadingComponent
          })}
          />
        );
      })
    }
  </BrowserRouter>
)
...

Но это создает ошибку.Отобразится часть ошибки загрузки компонента.Вот как выглядит мой загружаемый компонент:

const MyLoadingComponent = ({ isLoading, error }) => {
  // Handle the loading state
  if (isLoading) {
    return (
      <div>loading...</div>
    );
  }
  // Handle the error state
  else if (error) {
    return <div>Sorry, there was a problem loading the page.</div>;
  } else {
    return null;
  }
};

Если я console.log(error), я получу module not found './components/Home'.

Важно, если я вставлю в карту необработанную строку, как этоэто работает;он загружает один и тот же компонент для каждого маршрута.Почему я не могу использовать строку с карты в функции import ()?

...
return (
  <BrowserRouter>
    {
      Object.values(Routes).map(e => {
      return (
        <Route
          key={e.route}
          path={e.route}
          exact
          component={Loadable({
              loader: () => import('./components/Home'),
              loading: MyLoadingComponent
          })}
          />
        );
      })
    }
  </BrowserRouter>
)
...

Может кто-нибудь дать мне какой-нибудь совет, как решить эту проблему?Это невозможно или я ошибаюсь?Спасибо.

РЕШЕНО

Я исправил это, изменив e.path на ${e.path} (в окружении обратных галочек).

Что здесь происходит?почему объект сделал строку ... а не строку?