react router to be used as the child of element error

I created a react app and use react-router-dom for navigation. WHen i wrapp the app.js with BrowseRouter the following error shows.

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>.

the following is my App.js

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

    function App() {
      return (
     
     <BrowserRouter>
     
        <div className="App">
    
          <Header/>
    
          <Route exact path="/">
            <Home/>
          </Route>
            
          <Footer/>
      </div>  
      </BrowserRouter> 
      );
    }

Answer

You should wrap all the Route components in a Routes component, and render the components for each route on the element prop.

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <div className="App">
          <Header />

          <Routes>
            <Route path="/" element={<Home />} />
          </Routes>
          <Footer />
        </div>
      </BrowserRouter>
    </div>
  );
}

Edit react-router-to-be-used-as-the-child-of-routes-element-error