свойство 'pathname' не определено в React Routers

Question

Я следую инструкциям на YouTube по созданию целевой страницы, но я застрял на этом этапе.

Uncaught TypeError: Невозможно прочитать свойство 'pathname' undefined на новом маршрутизаторе

Вот код:

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();

Учебное пособие, которым я следую, использует версию реакции-маршрутизатора 5.0.1

Также вот мой Приложение. js код, который используется в индексе. 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;

Добавлен основной. js код

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

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

export default Main;

Я пытался поиск изменений, но не удалось найти решение, которое сработало.