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,注意括号内为标签