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.
//App.js File
import {Route, Routes} from 'react-router-dom';
import ProductList from './ProductList';
const App = () => {
return (
<Router >
<Routes>
<Route
exact
path="/"
render=
{ props =>
{
<ProductList {...props}
products={this.state.products}
currentCategory={this.state.currentCategory}
addToCart={this.addToCart} info={productInfo}/>
} }/>
</Routes>
</Router>
)
}
export default App;
When I start adding a route to the program it gives this error, I think the problem is in the render method.
Using a React router
Your render method is not returning any value. To return a value from an arrow function use () or return or simply omit the {}.
With ()
<Route
exact
path="/"
render=
{ props =>
{
(<ProductList {...props}
products={this.state.products}
currentCategory={this.state.currentCategory}
addToCart={this.addToCart} info={productInfo} />)
}
}
/>
With return
<Route
exact
path="/"
render=
{ props =>
{
return <ProductList {...props}
products={this.state.products}
currentCategory={this.state.currentCategory}
addToCart={this.addToCart} info={productInfo} />
}
}
/>
Without {}:
<Route
exact
path="/"
render=
{ props =>
<ProductList {...props}
products={this.state.products}
currentCategory={this.state.currentCategory}
addToCart={this.addToCart} info={productInfo} />
}
/>
It was fixed by deleting the render and editing it like this.
<Route
exact
path="/"
element={< ProductList products = {
this.state.products
}
currentCategory = {
this.state.currentCategory
}
addToCart = {
this.addToCart
}
info = {
productInfo
} />}/>