Reactでページ遷移をしたいな～と思ったある日、事件は起きた。
僕「ほ～ん、Reactのルーティングはreact-router-domってライブラリでやるんかぁ。よし、チュートリアルコピペっと！ん？なんか赤線あるな…？」
Module '"react-router-dom"' has no exported member 'Switch'.
(モジュール '"react-router-dom"' にエクスポートされたメンバー 'Switch' がありません。)
なんでや！まだコピペしただけやろ！なんでSwitchないねん！
…皆さんも同じ悩みを抱えてここに訪れたのではないでしょうか。どうも、コンポタ課長です。
というわけでなぜSwitchを使うときにエラーが出るのかと、その対処法について解説していきます。
なお、Reactで使用している言語がTypescriptの場合は以下のエラーの可能性もありますので、ご参考ください。
結論：アップデートで名前が変わったことが原因
なぜSwitchが見つからないかというと、ライブラリ「react-router-dom」がアップデートの際にメンバー「Switch」の名前を「Routes」に変更したためです。
名が体を表すよう、公式が機能に合わせて名前を変更したんですね。
- react-router-domのバージョン6系以降で名前が変更されている
- バージョンを指定せずにreact-router-domをインストールすると、バージョン6以降がインストールされてしまう
記事執筆時点で、シンプルに以下のようにバージョンを指定せずにreact-router-domをインストールすると、Switchが使えないバージョンがインストールされてしまいます。
// このコマンドだと、Switchが使えないバージョンがインストールされる
npm install react-router-dom対処法
対処法は次の２つが考えられます。
- その１：バージョンを5系に戻す
- その２：「Switch」を「Routes」に変更する
その１：バージョンを5系に戻す
一番手っ取り早いのは、5系のバージョンをインストールし直す対応です。
npm uninstall react-router-dom
npm install react-router-dom@5この２行のコマンドを実行することで、既にインストールされているバージョン6以降のreact-router-domをいったんアンインストールし、バージョン5のreact-router-domをインストールすることができます。
react-router-domの解説をしている記事の多くはバージョン5系（Switchの機能）を使っていることが多いため、ネットの記事を参考にコーディングしようと考えている方は5系をインストールするのが無難です。
僕もおとなしく5系に戻して作業しました。。
その２：「Switch」を「Routes」に変更する
名前が変わっただけなので、都度修正してコーディングするのも良い方法だと思います。
ただ、バージョン6系以降ではSwitchの名前だけではなく使い方もそれなりに変わっているので、「Switch」を「Routes」にする対応だけでは済まない部分も多く、バージョン5系のreact-router-domを使って実装している記事はあまり参考にならないでしょう。
「どうしてもバージョン6系で作業しなければならない」「公式のTips（英語）を読む気がある」といった方はこちらの方法でも問題ないかと思います。
おわりに
今回は、react-router-domのSwitchが、バージョンによって使えない可能性があることについて解説しました。
react-router-domに限らず、バージョン違いでエラーが起こるパターンは「あるある」ですので、皆さんも原因不明のエラーが起きたときは、まずバージョンを確認してみるのも有効手だと思います。
それでは良きReactライフを！
