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

Question

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

score 1 · Accepted Answer · answered Mar 24 '22 at 13:00

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
} />}/>

score 0 · Answer 2 · answered Mar 24 '22 at 12:33

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} />
    }
/>

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

2 Answers2

Linked