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

原因：

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 使用指南