在 NextJS 中使用带有动态组件的 switch 语句答案

【问题标题】：Using switch statement with dynamic components in NextJS在 NextJS 中使用带有动态组件的 switch 语句
【发布时间】：2020-03-04 00:17:38
【问题描述】：

我正在尝试在 NextJS 中使用动态导入，但我不明白为什么它仅在将导入的组件存储在变量中时才有效。当我尝试从其他函数返回它时它会中断。

它是这样工作的：

import dynamic from "next/dynamic";


const Article = dynamic(() => import("tutorial/ru/welcome.mdx"));

但是像这样，好吧，它坏了：

import dynamic from "next/dynamic";

export default ({ route }) => {
  switch (route) {
    case "ru":
    default:
      return dynamic(() => import("tutorial/ru/welcome.mdx"));
  }
};

我收到了 无效的挂钩调用。钩子只能在函数组件的主体内调用消息。

【问题讨论】：

这两个导入应该产生相同的值。我认为您的错误在其他地方。带有钩子的代码是什么引发了该消息？
我在组件树的那部分没有任何钩子，我认为“动态”实现中有钩子，但我可能错了。

标签： reactjs next.js dynamic-import

【解决方案1】：

我认为你需要导出它，然后尝试像这样使用它：

import dynamic from "next/dynamic";


const Article = dynamic(() => import("tutorial/ru/welcome.mdx"));

export default Article;

然后尝试在 switch 语句中使用它：

import Article from './Article';
export default ({ route }) => {
  switch (route) {
    case "ru":
     return (<></>)
    default:
      return <Article />;
  }
};

【讨论】：

是的，它是这样工作的，但它不再是动态的了。它是这样工作的：``` import dynamic from "next/dynamic"; const Article = dynamic(() => import("tutorial/ru/welcome.mdx")); export default ({ route }) => { switch (route) { case "ru": return (>) default: return
; } }; ``` 但是所有这些变量名......它会是一团糟。

【解决方案2】：

我找到了解决这个问题的方法！

import dynamic from "next/dynamic";

import Loader from "components/Loader/Loader";
import Error from "pages/_error";

export default ({ route }) => {
  const Article =  dynamic(
    () => import(`tutorial/${route}.mdx`).catch(err => {
      return () => <Error />
    }),
    { loading: () => <Loader /> }
  );
  return <Article />
};

毕竟我应该将组件存储在变量中，但是我使用文字字符串动态获取组件本身，然后我将组件作为标记（）返回。现在工作正常！

【讨论】：

这对你真的有用吗？它只是为我显示加载器，从不加载...
很抱歉回答迟了。是的，它工作正常。它在控制台中有什么说明吗？
经过大量实验，结果证明 import 调用中的路径是由 babel 解释的，它本质上为所有可能匹配的模块构建了一个巨大的模块（在这种情况下为 tutorial/*.mdx ）。如果其他导入重叠，它们甚至可能被复制。在我的情况下，我的路径太宽泛，导致 OOM 崩溃，或者太复杂而无法弄清楚路线。围绕该区域的支持和错误处理有点令人困惑，但它确实适用于这种直接的情况。
@justin.m.chase 明白了。这是一个有趣的情况。在我的情况下，它被分成单独的包。