Использование оператора switch с динамическими c компонентами в NextJS

Question

Я пытаюсь использовать динамический c импорт в Next JS, и я не понимаю, почему он работает только при сохранении импортированного компонента в переменной. Он ломается, когда я пытаюсь вернуть его из другой функции.

Это работает так:

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

Я получаю Invalid hook call. Хуки могут быть вызваны только в теле сообщения компонента функции .

Answer 1

Я нашел решение, чтобы обойти эту проблему!

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

Я должен все-таки сохранить компонент в переменной, но сам компонент получаю динамически, используя буквенные строки, и после этого я возвращаю Компонент как тег (). Работает нормально сейчас!

Answer 2

Я думаю, вам нужно экспортировать его, затем попробуйте использовать его так:

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