React踩坑：react-router-dom版本更新写法问题

<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版本6以下写法

<Route path="/" exact component={Index} />
<Route path="/list/" component={List} />

react-router-dom版本6写法:在外层嵌套一个routes就好了

import {Routes} from "react-router-dom"

<Routes>
<Route path="/" element = {<Home/>} />
<Route path="/List" element = {<List/>} />
<Routes/>

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

<Route path="/" element={<Home />}/>//改为这种尖括号写法就可以了
<Route path="/list/" element={List} />//报错原因

也可以把版本改为5

npm i react-router-dom@5.2.0