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

There is a problem with the react routing version. Check the package JSON file, check the version of react router dom. If it is version 6, this problem will occur.

In the V6 version of react router, route has changed its usage.

  import React from "react"
  import Home from "./pages/home"
  import Mine from "./pages/mine"

  import {BrowserRouter, Routes, Route} from 'react-router-dom'

  function App() {
      return (
        <div className="App">
          <BrowserRouter>
            <Routes>
              <Route path="/home"  element={<Home/>}></Route>
              <Route path="/mine" element={<Mine/>}></Route>
            </Routes>
          </BrowserRouter>
        </div>
      )  
  }
  export default App;

In the V5 version,

  import React from "react"
  import Home from "./pages/home"
  import Mine from "./pages/mine"

  import {BrowserRouter, Routes, Route} from 'react-router-dom'

  function App() {
      return (
        <div className="App">
          <BrowserRouter>
              <Route path="/home"  component={Home}></Route>
              <Route path="/mine" component={Mine}></Route>
          </BrowserRouter>
        </div>
      )
      
  }
  export default App;

Similar Posts: