Javascript: обобщение реагируемой загрузки с закрытием

Question

Я использую реагирующую загрузку для загрузки представлений.Приведенный ниже код работает нормально:

const Home = Loadable({
    loader: () =>
        import ('./views/home'),
    loading: Loading,
});

Но у меня есть несколько представлений, поэтому я хочу обобщить (реорганизовать) приведенный выше код, заменив строку пути переменной. И вот тут-то и начинается проблема. Я попробовал следующую технику, но она не загружает целевое представление, вместо этого оно просто сохраняет представление Загрузка , которое является просто временным представлением, содержащим простоСтрока 'Загрузка ...'.

const getLoadableView = (viewPath) => {
  return Loadable({
    loader: ((p) => {
      const m = p;
      return () => {
        console.log(m); //this one prints the correct value
        return import(m);
      };
    })(viewPath),
    loading: Loading
  });
}
const Home = getLoadableView('./views/home');

Я что-то упустил?Спасибо.

Answer 1

Я решил эту проблему следующим трюком:

const getLoadableView = (viewPath) => {
  return Loadable({
    loader: () => import(`./${viewPath}`);;
    })(viewPath),
    loading: Loading
  });
}
const homeViewPath = 'views/home';
const Home = getLoadableView(homeViewPath);

Вы можете заметить, что я ничего особенного не сделал, а просто разделил путь на две части.Первый путь жестко закодирован в вызове импорта.

Очевидно, что это не является надежным решением, но я не смог найти фактическую причину такого поведения вызова импорта.