javascript - React 路由器中未定义的属性“路径名”

Question

我正在关注 youtube 上关于构建登录页面的教程，但我陷入了这个阶段。

未捕获的类型错误：无法在新路由器上读取未定义的属性“路径名”

这是代码：

import ReactDOM from "react-dom";
import App from "./App";

import { BrowserRouter as Router } from "react-router-dom";

import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);
serviceWorker.unregister();

我正在关注的教程是使用 react-router 5.0.1版

这里还有我在 index.js 中使用的 App.js 代码：

import "./css/App.css";
import { Switch, Route } from "react-router-dom";

import Main from "./pages";

function App() {
  return (
    <div>
      <Switch>
        <Route path="/" component={Main} />
      </Switch>
    </div>
  );
}

export default App;

添加 Main.js 代码

import Header from "../components/Header";

class Main extends Component {
  render() {
    return (
      <div>
        <Header />
      </div>
    );
  }
}

export default Main;

我尝试搜索更改，但未能找到有效的解决方案。