react-router-dom v6 中的Routes‘Switch‘ is not exported from ‘react-router-dom‘

"react-router-dom": "^5.3.0",

在之前的react 项目中我们通过yarn add react-router-dom 引入react-router-dom文件

导入的文件的版本是5.3.0

然后再<App /> 这个组件中，我们这样写：

import React from 'react'
import { BrowserRouter as Router,Route,Switch } from 'react-router-dom';
import UserLogin from '@/components/UserLogin.js'
import HomeIndex from '@/components/HomeIndex.js'
import history from '@/components/History.js'


export default class App extends React.Component{
  render(){
    return (
        <Router history={history}>
           <Switch>  
            <Route path="/" component={UserLogin} />
              <Route path="/index" component={HomeIndex} />
           </Switch>
        </Router>
    );
  }
}

 那么在项目启动之后，localhost:3000 自动的显示是UserLogin 的页面，

但是这两天我同样使用yarn add react-router-dom 引入路由的包：

自动添加的却是 react-router-dom的6.0.2的包，版本的升级导致出现了

‘Switch‘ is not exported from ‘react-router-dom‘

Switch 在新的版本中，不能用了

说是变成了Routes，于是我把代码这样调整：

import React from 'react'
import { BrowserRouter as Router,Route,Routes} from 'react-router-dom';
import history from '@/components/history/History.js'
import IndexMenu from '@/components/IndexMenu.js'
import UserLogin from '@/components/login/UserLogin.js'

export default class App extends React.Component{
  render(){
    return (
        <Router history={history}>
         <Routes>  
            <Route path="/index" component={IndexMenu} />
              <Route path="/" component={UserLogin} />
         </Routes>
        </Router>
    );
  } 
}

我把原来代码中的Switch 换成了Routes 但是项目启动，并没有像我想的那样，页面并没有直接跳转到 UserLogin 这个组件

那里错了

<Route path="/" element={<UserLogin />} />
              <Route path="/index" element={<HomeIndex />} />

route 标签中的内容也要做相应的修改

然后，我们启动项目，默认跳转到UserLogin 这个页面