react-router-dom ^6.0.2使用过程中报错 Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞

因为react-router-dom更新的之后路由使用时做了一写改变
废话不多说，上代码
旧版本:

import React from 'react'
import ReactDOM from 'react-dom'
/* 
  react-router-dom 的基本使用：
  1 安装： npm i react-router-dom
*/
// 2 导入组件：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

const First = () => <p>页面一的内容</p>

// 3 使用Router组件包裹整个应用
const App = () => (
  <Router>
    <div>
      <h1>React路由基础</h1>
      {/* 4 指定路由入口 */}
      <Link to="/first">页面一</Link>

      {/* 5 指定路由出口 */}
      <Route path="/first" component={First} />
    </div>
  </Router>
)

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

新版本：

import React from 'react'
import ReactDOM from 'react-dom'
/* 
  react-router-dom 的基本使用：
  1 安装： npm i react-router-dom
*/
// 2 导入组件：
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'

const First = () => <p>页面一的内容</p>
const Home = () => <p>我是首页</p>

// 3 使用Router组件包裹整个应用
const App = () => (
  <Router>
    <div>
      <h1>React路由基础</h1>
      {/* 4 指定路由的入口 */}
      <Link to="/first">页面一</Link>

      {/* 5 指定路由出口 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/first" element={<First />} />
      </Routes>
    </div>
  </Router>
)

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

总结： Route 需要在 Routes 里，组件为 element,注意括号内为标签