使用react-router-dom时出现组件类型无效错误，请求排查解决

我正在codesandbox.io中开发项目，尝试使用react-router-dom，但遇到了如下错误，始终无法找出问题所在。请问我哪里操作有误？

错误信息 #

Error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of <App>.

现有代码 #

index.js #

import React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Home from "./Home";

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Home.js #

import React from "react";

const Home = () => {
  return (
    <div>
      <div>Home</div>
    </div>
  );
};

export default Home;

解决方案 #

问题出在React Router DOM版本不兼容：当前安装的应该是v6版本，但你写的是v5的语法。v6移除了Switch组件，同时修改了Route的使用方式。

适配v6版本的修改 #

将Switch替换为Routes，并给Route添加element属性传入组件：

import React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

若需保留v5语法 #

如果一定要用Switch，则需要安装v5版本的依赖：

npm install react-router-dom@5

推荐使用最新的v6版本，按上述方式修改代码即可解决错误。

内容的提问来源于stack exchange，提问作者bonum_cete