React 常见报错

1. 报错：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>.
   1. 报错原因：react-router-dom更新产生路由发生变化导致
   2. 解决①更新最新的react-router-dom版本；②路由组件增加Routers嵌套，组件使用element引入
      1. 老版本代码

         import React from 'react'
         import { BrowserRouter, Route } from 'react-router-dom'
         import First from "./first"
         const App = () => (
           <BrowserRouter>
               {/* 路由组件 */}
               <Route path="/first" component={First} />
           </BrowserRouter>
         )
         ReactDOM.render(<App />, document.getElementById('root'))

      2. 新版本代码，增加routers和使用element引入组件

         import React from 'react'
         import { BrowserRouter, Route, Routes } from 'react-router-dom'
         import First from "./first"
         
         const App = () => (
           <BrowserRouter >
               <Routes>
                 <Route path="/" element={<Home />} />
                 <Route path="/first" element={<First />} />
               </Routes>
           </BrowserRouter >
         )
         ReactDOM.render(<App />, document.getElementById('root'))
         

2. 报错。。。