未知组件的动态导入 - 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;

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 />
}

Answer 2

发生这种情况是因为 router.query 尚未准备好并且 router.query.component 在动态页面的第一次呈现时 undefined。

这将在第一次渲染时打印 false，在下一次渲染时打印 true。

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

您可以用 useEffect 包装它以确保 query 已加载。

const router = useRouter();

useEffect(() => {
  if (router.asPath !== router.route) {
    // router.query.component is defined
  }
}, [router])

Github Issue: Add a ready: boolean to Router returned by useRouter

Answer 3

我遇到了与线程开启器相同的问题。文档描述，不可能在动态的 import() 中使用模板字符串：

在我的例子中，也无法添加带有路径的通用变量...

解决方案

我发现了一个简单的技巧来解决这个问题：

// getComponentPath is a method which resolve the path of the given Module-Name
const newPath = `./${getComponentPath(subComponent)}`;
const SubComponent = dynamic(() => import(''+newPath));

所有 MAGIC 似乎是空字符串与我生成的变量 newPath 的串联：''+newPath

另一个解决方案：

另一个解决方案（由 bjn 从 nextjs-Discord-Channel 发布）：

const dynamicComponents = {
  About: dynamic(() => import("./path/to/about")),
  Other: dynamic(() => import("./path/to/other")),
  ...
};

// ... in your page or whatever
const Component = dynamicComponents[subComponent];
return <Component />

如果您了解所有可动态注入的组件，此示例可能会有用。因此，您可以将它们全部列出并稍后仅在需要时在您的代码中使用它）

Answer 4

下面的代码对组件函数中的 dynamic 有效。

import dynamic from "next/dynamic";

export default function componentFinder(componentName, componentPath) {

    const path = componentPath; // example : "news/lists"

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

    return <DynamicComponent />;
}

Answer 5

前面说过动态导入需要专门写成没有模板字符串。因此，如果您事先知道所需的所有组件，则可以动态导入它们并使用条件语句仅呈现您想要的组件。

import React from 'react';
import dynamic from 'next/dynamic';

const Component1 = dynamic(() => import('./Component1').then((result) => result.default));

const Component2 = dynamic(() => import('./Component2').then((result) => result.default));

interface Props {
  slug: string;
  [prop: string]: unknown;
}

export default function DynamicComponent({ slug, ...rest }: Props) {
  switch (slug) {
    case 'component-1':
      return <Component1 {...rest} />;
    case 'component-2':
      return <Component2 {...rest} />;
    default:
      return null;
  }
}

未知组件的动态导入 - NextJs

Dynamic Importing of an unknown component - NextJs

dynamic-import

next.js

解决方案

另一个解决方案：