react router to be used as the child of element error

Question

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> 
      );
    }

What isn't clear in the error message. The `Route` components need to be wrapped in a `Routes` component. https://stackoverflow.com/a/69832889/8690857 — Drew Reese, Nov 09 '21 at 05:25
Can you show us what you're doing when you try to resolve this by wrapping the routes in a `Routes` component? — Drew Reese, Nov 09 '21 at 05:29

score 2 · Accepted Answer · answered Nov 09 '21 at 05:49

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>
  );
}

Samira · Answer 2 · 2021-11-09T05:52:17.657

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

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

or in React-router-dom version 6 :

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

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

React-router-dom version 6 doesn't export a `Switch` component, it was replaced by the `Routes` component. — Drew Reese, Nov 09 '21 at 05:51

react router to be used as the child of element error

2 Answers2