備忘録 React Reduxエラー "export 'Switch' was not found in 'react-router-dom'で

少し古いガイドラインに沿ってアプリ制作をしていたら、いきなりSwitchがないというエラー。

react-router-domのバージョンが原因。v6以降はSwitchがRoutesになり書き方に変更点が数カ所。

①v5に戻す、②v6の書き方へ変更するの２種類の対処法をまとめました。

対処法①

バージョンをv5に戻す

以下のコマンドで、現行バージョンをアンインストールして、v5をインストールし直す。

npm uninstall react-router-dom

npm install react-router-dom@5.2.0

対処法②

Switch → Routesに変更

index.jsx＜変更前＞

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import App from './components/app';

const store = createStore()

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        <Route path="/channels/:channel" component={App} />
      </Switch>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root");
);

index.jsx＜変更後＞

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

import App from './components/app';

const store = createStore()

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root");
);

• importの変更
• Switch→Routesに変更
• component→element
• {App}→{}