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

原因：

React路由版本问题，你可以查看自己的package.json文件，查看react-router-dom的版本，应该是 6 版本。

在 React-Router v6版本中，Route更改了使用方式。

使用 Route 需要在 Routes 标签包裹下：

import { BrowserRouter, Link, Route, Routes } from "react-router-dom"
import Home from './components/Home/Home'
import About from './components/About/About'

<Routes>
  <Route path="/home" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

在 V5 版本则是这样使用

import { BrowserRouter, Link, Route, Switch } from "react-router-dom"
import Home from './components/Home/Home'
import About from './components/About/About'

<Switch>
    <Route path="/home" component={Home} />
	<Route path="/about" component={About} />
</Switch>

解决：

• 第一种方法：更改react-router-dom的版本，改为 5.2.0

  npm i react-router-dom@5.2.0
  

• 第二种方法，使用最新语法规则

---

详细的React-router V6 更新，可以看如下：

React-Router v6 新特性解读及迁移指南

React Router v6 使用指南