Default Export と Name Export の index.tsの指定方法

Default Exportした時のindex.tsの指定方法がわからなかった・・・。

Default Exportした時のindex.tsの指定方法

components/Page1.tsxはデフォルトエクスポートしています。

components/Page1.tsx

function Page1() {
  return <p>Page1</p>
}
export default Page1

components/index.tsxは、このように再エクスポートします。

components/index.tsx

export { default as Page1 } from './Page1'
export { default as Page2 } from './Page2'

App.tsxではまとめてimportできます。

App.tsx

import { Page1, Page2 } from './components'

Named Exportした時のindex.tsの指定方法

components/Page1.tsx

export const Page1 = () => {
  return <p>Page1</p>
}

components/index.tsxは、このように再エクスポートします。

components/index.tsx

export * from './Page1'
export * from './Page2'

App.tsxではまとめてimportできます。

App.tsx

import { Page1, Page2 } from './components'