[Solved] Matched leaf route at location "/" does not have an element

Problem:

while working with react-router we got an error saying,

Matched leaf route at location "/" does not have an element. This means it will render an with a null value by default resulting in an "empty" page

Our App.js file is below,

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
const App = () => {
  return (
    <Router >
      <Routes>
        <Route path="/" component={ Home }></Route>
      </Routes>
    </Router>
  )
}
export default App;

Solution 1:

In react-router version-6, you can't use the component prop anymore. It was replaced in with element. So instead of using,

<Route path="/" component={ Home }></Route>

You should use this,

<Route path="/" element={<Home />}></Route>

You can get more info about the react-router version 6 in the migration doc.

Thank you for reading the article. If you have any suggestions please comment below.