next.js - 未知组件的动态导入 - NextJs

Question

我想根据路由动态加载组件。我正在尝试制作一个可以加载任何单个组件以进行测试的页面。

但是，每当我尝试这样做时import(path)，它都会显示加载程序，但从未实际加载。如果我对包含的完全相同的字符串进行硬编码，path那么它可以正常工作。是什么赋予了？如何让 nextjs 实际动态导入动态导入？

// pages/test/[...component].js

const Test = () => {
  const router = useRouter();
  const { component } = router.query;
  const path = `../../components/${component.join('/')}`;

  console.log(path === '../../components/common/CircularLoader'); // prints true

  // This fails to load, despite path being identical to hard coded import
  const DynamicComponent = dynamic(() => import(path), {
    ssr: false,
    loading: () => <p>Loading...</p>,
  });

  // This seems to work
  const DynamicExample = dynamic(() => import('../../components/Example'), {
    ssr: false,
    loading: () => <p>Loading...</p>,
  });

  return (
    <Fragment>
      <h1>Testing {path}</h1>
      <div id="dynamic-component">
        <DynamicComponent />      <!-- this always shows "Loading..." -->
        <DynamicExample /> <!-- this loads fine. -->
      </div>
    </Fragment>
  );
};

export default Test;

标签： next.jsdynamic-import

Answer 1

我把dynamic组件放在外面，它工作正常。

const getDynamicComponent = (c) => dynamic(() => import(`../components/${c}`), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

const Test = () => {
  const router = useRouter();
  const { component } = router.query;
  
  const DynamicComponent = getDynamicComponent(component);

  return <DynamicComponent />
}