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

问题描述 投票:0回答:2

我正在尝试在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
2个回答
0
投票

我认为您需要导出它,然后尝试像这样使用它:

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


0
投票

我找到了解决此问题的解决方案!

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

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

© www.soinside.com 2019 - 2024. All rights reserved.