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

Question

我正在尝试在 NextJS 中使用动态导入，但我不明白为什么它只能在将导入的组件存储在变量中时起作用。当我尝试从其他函数 return 它时它中断了。

它是这样工作的：

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"));
  }
};

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

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

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

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

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

Using switch statement with dynamic components in NextJS

dynamic-import

reactjs

next.js