🌀

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

2022/02/10に公開

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'

Discussion