export defaultってなんだろう

問題

突然ですが、ここにこんなSampleコンポーネントがあります。（この記事はちょっとしたReact要素を含んでいますがReactを知らなくても多分わかります。)

sample.tsx

export const Sample: FC<Props> = () => {
    return(<div>sample</div>);
}

これは、いかにもこんな感じでimportして使えそうです。

sampleContainer.tsx

import { Sample } from './sample.tsx';
import { connect } from 'react-redux';

const mapStateToProps = .... ;　// 割愛

export default connect(mapStateToProps)(Sample);

さて、ここでexport defaultされているこの子はいったいどのようにimportしたら他の場所で使えるのでしょうか。

答え

答えは以下のようになります。

routing.tsx

import SampleContainer from './sampleContainer.tsx';

const participantRoutes: Routes = [
  {
    path: "/activity",
    component: SampleContainer
  }
];

ファイル名と対応しているのかな？と一見思うかもしれませんが、これは唯一の回答ではありません。これでもいいのです。

routing.tsx

import SC from './sampleContainer.tsx';

const participantRoutes: Routes = [
  {
    path: "/activity",
    component: SC
  }
];

と言うか、なんでもいいのです。(Syntax上はですが)
なんででしょうか。

考えてみたらとても自明なことだし納得のいくことなのですが、ReactでReduxするまでこれを意識しなければいけない場面がなかったので全く気づかず、不思議に思っていました。

解説

ポイントはexport defaultです。これは文字通り、そのファイルのデフォルトとして後ろに続くものをexportするよ、という意味になります。
export defaultされたものを使いたい時、importする側は任意の名前をつけることができます。それは、これをデフォルトにするよ、と宣言しているからです。
これは自然に理解できると思いますが、デフォルトを複数指定することはできません。なので、１ファイル内にさっきのconnectのようなexport default宣言を複数書くとエラーが出ます。
なるほど、だから名前を好きにつけてもちゃんとconnectが使えたのですね

詳しい説明： MDN Export