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できます👍