解决“Uncaught Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element......“报错

在学习React路由中遇到的问题：

Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

经过半天的折腾，最终发现是react-router-dom版本的问题，你可以去package.json中查看react-router-dom的版本，如果是6.x.x，那么你多半会遇到这个问题。

以下是解决方法：
初始报错代码如下：

// 导入组件：
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const First = () => <p>页面一的内容</p>;
// 使用Router包裹整个应用
const App = () => (
  <Router>
    <div>
      <h1>React路由基础</h1>
      {/* 指定路由入口 */}
      <Link to="/first"> 页面一 </Link>
      {/* 指定路由出口 */}
      <Route path="/first" component={First}></Route>
    </div>
  </Router>
);

解决方案：
step1:
导入组件中加入routes；

import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";

step2:
使用routes包裹route；

 <Routes>
        <Route path="/first" component={First}></Route>
 </Routes>

运行：

然而又出现了另一个问题：在点击链接的时候无法跳转
解决办法：
将component改为element，组件使用标签形式的写法：

<Route path="/first" element={<First />}></Route>

完整代码如下：

// 导入组件：
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";

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

// 使用Router包裹整个应用
const App = () => (
  <Router>
    <div>
      <h1>React路由基础</h1>
      {/* 指定路由入口 */}
      <Link to="/first"> 页面一 </Link>
      {/* 指定路由出口 */}
      <Routes>
        <Route path="/first" element={<First />}></Route>
      </Routes>
    </div>
  </Router>
);

点击链接可以显示内容了
至此，问题解决。