Reactで、BrowserRouter was not found in 'react-router' と表示される

Question

今Reactでreact-routerの機能を使って、signupを表示しようとしているんですが、以下のようなエラーが出てしまいました。

ERROR in ./src/Router.jsx 10:30-43
export 'BrowserRouter' (imported as 'BrowserRouter') was not found in 'react-router' (possible exports: MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes)
 @ ./src/App.js 5:0-30 11:35-41
 @ ./src/index.js 7:0-24 11:33-36

react-router-domのバージョンの問題かと思い、下げたんですがうまく行きません。
npm install react-router-dom@5

分かる方がいればよろしくお願いします。

#Router.jsx

import React from "react";
import { Route, BrowserRouter } from "react-router";

const Router = () => {
  return (
    <BrowserRouter>
      <Route path="/signup" component={SignUp} />
    </BrowserRouter>
  );
};

const SignUp = () => {
  return (
    <div>
      <h1>aaaaa</h1>
    </div>
  );
};

export default Router;

#App.js
import React from "react";
import Router from "./Router";

const App = () => {
  return (
    <main className="c-main">
      <Router />
    </main>
  );
};

export default App;

#package.json
{
  "name": "ec-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/styles": "^4.11.4",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "connected-react-router": "^6.9.2",
    "firebase": "^9.6.9",
    "history": "^5.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router": "^6.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "redux-actions": "^2.6.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.4.1",
    "reselect": "^4.1.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

Githubで検索してみました。

https://github.com/remix-run/react-router/search?q=BrowserRouter

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

だと思います。

Answer 2

以下のようにしたらどうなるでしょうか？

import { BrowserRouter } from 'react-router-dom';

参考に Visual Studio のテンプレートで自動生成されるコードを載せておきます。