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

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

The React.js warning "Matched leaf route at location "/" does not have an element or Component." is caused for multiple reasons:

• using the component prop instead of element in recent versions of React Router.
• forgetting to set the element prop on a Route.
• misspelling the element prop.

To solve the error, use the element prop of the Route component to render a component when a given path is matched.

Here is the complete stack trace.

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

Here is an example of how the warning occurs.

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

export default function App() {
  return (
    <Router>
      <Routes>
        {/* ⛔️ causes the warning - should be element={<Home />} */}
        <Route path="/" component={Home} />
      </Routes>
    </Router>
  );
}

function Home() {
  return <div>Home page</div>;
}

The Route component doesn't take a component prop in recent versions of React Router.

Instead, you should use the element prop to render a component when a given path is matched.

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

export default function App() {
  return (
    <Router>
      <Routes>
        {/* ✅ correctly using element prop */}
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

function Home() {
  return <div>Home page</div>;
}

In other words, you should replace the following use of component.

Copied!
// ⛔️ older API (does NOT work)
<Route path="/" component={Home} />

With the use of the element prop in recent versions of React Router.

Copied!
// ✅ up-to-date API (works)
<Route path="/" element={<Home />} />

Notice that the specified component is enclosed in a tag when using the element prop.

Copied!
// ✅ correct
element={<Home />}

// ⛔️ incorrect
element={Home}

Make sure to enclose the component in a self-closing tag when passing it to the element prop.

# Forgetting to set the element prop on a Route

If you forget to set the element prop on a Route, the warning is shown.

For example, the following code causes the warning.

Copied!
// ⛔️ Matched leaf route at location "/" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.
<Route path="/" />

If the element prop is not specified, an empty page is shown.

Route components in React Router render a component based on 2 props:

• element
• Component

Notice that the first letter in Component is capitalized in the new API.

If you want to create the React element, use the element prop.

Copied!
// ✅ valid syntax
<Route path="/about" element={<About />} />

If you use the Component prop, don't enclose the function in a self-closing tag and React Router will create the React element for you.

Copied!
// ✅ valid syntax
<Route path="/about" Component={About} />

Notice that:

1. The Component prop starts with a capital C.
2. We didn't enclose the About function in a self-closing tag (not <About />) when using the Component prop.

# Misspelling the element prop

The warning is also shown if you misspell the element prop.

Copied!
// ⛔️ the element prop is misspelled
<Route path="/about" elemnent={<About />} />

The element prop in the code sample above is misspelled, so the warning is shown.

Misspelling the prop is equivalent to not passing the element prop at all.

# Restart your development server

If the error persists, try to restart your development server.

Focus your terminal and press Ctrl + C (or Cmd + C on macOS) to manually stop the server.

Issue the npm start or npm run dev command (depending on your setup) to start your dev server.

# Conclusion

To solve the React.js warning "Matched leaf route at location "/" does not have an element or Component", make sure:

• to use the element prop when specifying a component to match in a Route.
• you haven't forgotten to set the element prop on the Route component.
• you haven't misspelled the element prop.