[解決済み] switch' は 'react-router-dom' からエクスポートされません。

質問

package.jsonにreact-router-domの依存関係が追加されました。アプリコンポーネントはBrowswerRouterでラップされていますが、switchでルートをラップすると、以下のエラーが表示されます Switch' is not exported from 'react-router-dom'. package.json.lock ,node modulesを削除し、再度npmをインストールし、npm install @babel/core -saveしました。まだ動作していません。私はこのために6時間を無駄にすることに成功しました。なぜインポートされないのでしょうか？

インデックス.js

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

ReactDOM.render(
  <BrowserRouter>
     <App />
  </BrowserRouter>,
  document.getElementById('root')
);

App.jsです。

 import logo from './logo.svg';
import './App.css';
import React from 'react';
import {Switch,Route,Link} from 'react-router-dom';
import Home from './Home';
class App extends React.Component {
  componentDidMount(){
    alert('mounting');
  }
  componentDidUpdate(){
    alert('updated');
  }
 render(){
  return (
    
    <div className="App">
     
    <div>
      <Link to="/">Home</Link>
    </div>

    <hr />

    <Switch>
      <Route exact path="/">
        <Home/>
      </Route>
    </Switch>
 
  </div>
 
);
 }
}

export default App;

import React from 'react';

    const Home = () => {
    return <h1>Home</h1>;
  };
  
  export default Home;

パッケージ.json

"dependencies": {
    "@babel/core": "^7.16.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.0.0",
    "react-router-dom": "^6.0.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

解決方法は？

使用方法 Routes の代わりに Switch react-router v6 では

を使用しています。 react-router-dom バージョン6では SwitchをRoutesコンポーネントに置き換えた

import {
  BrowserRouter,
  Routes, // instead of "Switch"
  Route,
} from "react-router-dom";

// ...

    <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<Home />}>
          <Home/>
        </Route>
      </Routes>
    </BrowserRouter>

ここで、コンポーネントを element を使用する代わりに、children を使用します。