Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

はじめに

Reactでルーティングを作成しようとしていた時に、タイトルのエラーに遭遇したので解決策をまとめました。

問題

import { BrowserRouter, Link, Switch, Route } from "react-router-dom";

import文の中の Switchが問題だった。

解決方法

react Routeバージョン5以前では、Reactアプリのルートをラップするのに Switch コンポーネントが使用されていました。
問題が起きたのはバージョン6なので、React Routerバージョン6では Switch の代わりに Routes コンポーネントに置き換えられています。

imprt { Routes } from 'react-router-dom';

おわりに

焦らずエラー文を解釈し、バージョン差分には気を付けましょう。

参考