CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Minsaf
Minsaf

Reputation: 274

react router to be used as the child of <Routes> 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> 
      );
    }

Upvotes: 2

Views: 319

Answers (2)

Samira
Samira

Reputation: 2723

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

Upvotes: 1

Drew Reese
Drew Reese

Reputation: 202605

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

Upvotes: 2

Related Questions