React Router - never rendered directly

user_19232340 0
Viewed 43

in my react app routing is not working and it throws an error in the console. in my index file

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

<React.StrictMode>
    <Router>
      <Route path="/" element={<App />} />
    </Router>
  </React.StrictMode>

and in my App.js

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

function App() {
  return (
    <div className="App">
        {/* <DataProvder> */}
        <Sidebar />
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/students' element={<Students />} />
          <Route path='/schools' element={<Schools />} />
          <Route path='/campus' element={<Campus />} />
          <Route path='/placement' element={<Placement />} />
          <Route path='/courses' element={<Courses />} />
          <Route path='/staff' element={<Staff />} />
        </Routes>
        {/* </DataProvder> */}
    </div>
  );
}

export default App;

When running this there is nothing to display, but in the console it throws this error:

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

What am I doing wrong here?

react-router-dom reactjs javascript
2 Answers

The <Route> in index.js needs wrapping with <Routes>

user_10863980

All Route components must be rendered by either a Routes component or another Route component in the case of nesting routes.

The Route in the index.js file is wrapped and rendered by the Router which is invalid. To resolve wrap it in a Routes component.

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

<React.StrictMode>
  <Router>
    <Routes>
      <Route path="/" element={<App />}/>
    </Routes>
  </Router>
</React.StrictMode>

Or just render App directly since it handles rendering Home on path "/" for you.

import { BrowserRouter as Router } from 'react-router-dom';

<React.StrictMode>
  <Router>
    <App />
  </Router>
</React.StrictMode>
user_86908570
Related