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

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

Posted by Margie Crona on June 16, 2022

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

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

Posted by Margie Crona on June 16, 2022

If you come across this error in your React project:

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

Your project has react-router-dom version 6. In version 6, you will need to replace component prop with element prop within your route

replace this:

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

with this:

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

or you can revert to react-router-dom version 5.

Hopefully this was helpful.