Attempted import error: 'Switch' is not exported from 'react-router-dom' の原因と直し方【Dockerで検証済み】
Attempted import error: 'Switch' is not exported from 'react-router-dom' の原因と解決方法。検証済みの解決コマンド付きで、現象→原因→解決→確認の順に最短で直せます。
発生したエラー
Attempted import error: 'Switch' is not exported from 'react-router-dom'結論：まずこれで直ります
react-router-dom v6 では `Switch` コンポーネントが廃止され、代わりに `Routes` が導入されました。下の解決コマンドを順に実行すれば直ります。
cd /app && cat > index.js << 'EOF'
const { Routes, Route } = require('react-router-dom');
console.log('Routes (formerly Switch):', Routes);
console.log('Route:', Route);
EOF現象どんなエラーか
次の操作を行うと（検証環境: node:20）、上記のエラーが発生します。まずは下の再現コマンドで、同じ状況を再現できることを確認してください。
検証環境：node:20
mkdir -p /app && cd /app && cat > package.json << 'EOF'
{
"name": "test-app",
"version": "1.0.0",
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.0.0"
}
}
EOF
npm install --silent
cat > index.js << 'EOF'
const { Switch, Route } = require('react-router-dom');
console.log('Switch:', Switch);
EOF
node index.js原因なぜ起きるのか
react-router-dom v6 では `Switch` コンポーネントが廃止され、代わりに `Routes` が導入されました。v5 までは `<Switch>` で複数の `<Route>` を囲んでいましたが、v6 以降は `<Routes>` を使います。また v6 では `<Route>` の書き方も変わり、`component` プロップではなく `element` プロップにJSX要素を渡す形式になっています。修正方法は、①import文の `Switch` を `Routes` に置き換える、②JSX内の `<Switch>` タグをすべて `<Routes>` に置き換える、③`<Route component={Comp}>` を `<Route element={<Comp />}>` に書き換えるの3ステップです。もし既存コードを v5 のまま維持したい場合は `npm install react-router-dom@5` でバージョンをダウングレードする方法もありますが、長期的には v6 への移行を推奨します。
解決解決手順
cd /app && cat > index.js << 'EOF'
const { Routes, Route } = require('react-router-dom');
console.log('Routes (formerly Switch):', Routes);
console.log('Route:', Route);
EOF確認直ったか確認する
cd /app && node index.js && node -e "const { Routes, Route } = require('react-router-dom'); if (!Routes || !Route) process.exit(1); console.log('OK: Routes and Route are available');"動画で見る
この記事の解決手順は実環境で検証しています
山田 英紀（社内SE 5年以上・13業種以上の業務システムを開発／運用）が、 掲載コマンドを検証環境で実行し、再現〜解決〜確認まで通ることを確認しています。