【React新版本踩坑】路由

第一个坑：用 <BrowserRouter/> 包裹<Link> 和 <Route>，新版本会报如下错误：

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>.

解决：引入Routes用来包裹Route

import { Route, Routes } from 'react-router-dom'
<Routes>
    <Route xxx />
    <Route xxx />
</Routes>

第二个坑：使用Routes包裹的Route标签内使用component指定路由组件，报错如下：

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

解决：使用element属性，值为标签

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