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

Question

    import Home from './pages/Home';
import { BrowserRouter as Routes, Route} from 'react-router-dom';
function App() {
  return ( 
    <Routes>
    <div className="max-w-screen-md mx-auto pt-20">
     <Route exact path="/" component={Home} />
    </div>
    </Routes>
    );
}
export default App;

Already i have many research and install many npm base code , but facing same problem (Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a ).

Thanks and love from my heart for advanced.

Hi, i experimented the same problem, it is just because, the code reference used, it is from a date let say one year ago, and the router-dom project did rules changes in the component design, so, it does not work thus anymore. i reverted the dependency in the package.json, from the nowdays, set by the npm command: npm install --save react-router-dom, which today is "react-router-dom": "^6.0.2" and i used the older, from the git repo where the tutorial had set on the dependency version wich really supports that implementation "react-router-dom": "^5.0.1" — Mapusoft, Nov 29 '21 at 13:04
this is the repository https://github.com/adrianhajdin/project_chat_application/blob/master/client/src/App.js it is like the one you are trying, navigate the repo, two levels above, and confirm the version dependency in the package.json — Mapusoft, Nov 29 '21 at 13:08

score 10 · Accepted Answer · answered Nov 24 '21 at 03:33

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

You're importing BrowserRouter and renaming it to Routes. This isn't the component that is mentioned in the error message. Instead, you need to import BrowserRouter and also import Routes and use it.

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

function App() {
  return (
    <BrowserRouter>
      <div className="max-w-screen-md mx-auto pt-20">
        <Routes>
          <Route exact path="/" component={Home} />
        </Routes>
      </div>
    </BrowserRouter>
  )
}

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

1 Answers1