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>

user_17493776 0
Viewed 10332
    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.

react-router-dom react-router reactjs
1 Answers
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>
  )
}
user_37948120
Related