react-router-dom v6 中的Routes

"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 这个页面