Reactでdefault exportではないコンポーネントをlazy importしたいっ!
2022年8月10日
タイトルの通りですが、
export default function Hoge() {
return (
<h1>ほげほげ</h1>
);
}
上記のようなコンポーネントを普通にimportすれば
import Hoge from './hoge';
で、lazyを使ったとしても
const Hoge = React.lazy(() => import('./hoge'));
ですが、
export default function Hoge() {
return (
<h1>ほげほげ</h1>
);
}
export function Foo() {
return (
<h2>ふーふー</h2>
);
}
のように、default exportではないFooコンポーネントをimportしたい時は
const Foo = React.lazy(() => import('./hoge').then(module => ({ default: module.Foo})));
とすればimportできます👍