How to fix The component for route did not return a valid React element in React
React Router reports this error when a route resolves to a component that returns something other than a React element (for example because it lacks a return value, is declared async, or falls through every branch).
Quick fix
Fixes The component for route did not return a valid React element
// ❌ Incorrect: element receives the component type
<Routes>
<Route path="/" element={Home} />
</Routes>
// ✅ Correct: element receives the JSX element
<Routes>
<Route path="/" element={<Home />} />
</Routes>- Pass JSX to the element prop
- Return JSX or null explicitly
- Avoid async route components
- Cover every conditional path
// ❌ Incorrect: element receives the component type<Routes><Route path="/" element={Home} /></Routes>// ✅ Correct: element receives the JSX element<Routes><Route path="/" element={<Home />} /></Routes>The component for route did not return a valid React element
What this error means
React Router throws this error when it instantiates the component that a route points at and that function fails to deliver a React element or null. Instead of producing JSX, the component returned undefined, a Promise, or simply reached the end of the body without yielding anything, so the router cannot continue rendering and surfaces the message before the DOM updates. The framework derives the component either from the routes you declare inside <Routes> or from the route objects you pass to createBrowserRouter/createRoutesFromElements. After React creates the component, it immediately inspects the return value. When the value is not a valid React node, React Router halts the render tree and reports the failure, because it relies on that element to keep walking the tree and mounting nested <Outlet>s. In practice the culprit is often forgetting to return JSX inside the component, declaring the component as async (which always returns a Promise), or letting conditional guards fall through all branches. Verifying the component’s body and how it is wired into the route pair usually lets you fix the issue quickly.
Typical symptoms
- Console logs the error "The component for route did not return a valid React element" with a stack trace inside react-router or RouterProvider.
- Navigating to the matching path renders a blank page or the <Outlet> never receives its children.
- A route-specific error boundary immediately shows its fallback UI for the path instead of rendering the route content.
- React DevTools shows the route component mounted but its children list is empty or marked as undefined.
Common causes
- The function component matched by the route lacks a return statement or accidentally returns undefined in some path, so React receives an invalid render output.
- The route component is declared async, which makes it return a Promise instead of JSX; React Router cannot render promises without wrapping them in <Suspense> via lazy().
- Conditional logic or early guards (e.g. feature flags, data checks) run to completion without returning anything, leaving the function implicitly returning undefined.
How to fix "The component for route did not return a valid React element"
React Router 6 expects the element prop to receive JSX. Do not pass the component constructor directly:
// ❌ Incorrect: element receives the component type
<Routes>
<Route path="/" element={Home} />
</Routes>
// ✅ Correct: element receives the JSX element
<Routes>
<Route path="/" element={<Home />} />
</Routes>Every branch of the component must return a valid React node or null:
const Dashboard = () => {
if (!isReady) {
return null; // ❌ This should not be left implicit
}
return (
<main>
<h1>Dashboard</h1>
</main>
);
};Marking a component as async makes it return a Promise, which React Router refuses to render. Move data fetching into loaders/useEffect or wrap a lazy import with Suspense instead:
// ❌ This returns Promise<ReactNode> and triggers the error
const Profile = async () => {
await fetchUser();
return <div>Profile</div>;
};
// ✅ Keep the component synchronous
const Profile = () => {
const user = useUser();
return <div>Profile for {user.name}</div>;
};Make sure every guard returns something instead of falling through. Explicitly return null when you need to skip rendering:
const Settings = ({ config }) => {
if (!config) {
return null; // explicit return keeps the router happy
}
if (config.disabled) {
return <DisabledNotice />;
}
return <SettingsPanel config={config} />;
};Advanced notes
React Router validates each RouteObject.element when it resolves routes from JSX or the route array. The validation happens inside createRoutesFromChildren/createRoutesFromElements before any nested <Outlet> renders, which is why the error shows up immediately. If you still need to fetch data before rendering, use loaders (createBrowserRouter + loader) or React.lazy with Suspense; both keep your component synchronous while React Router waits for the data and then renders a valid element.
Also make sure you export the component you intend to render (default or named) so that the import is not undefined. An undefined component will also produce this error even if everything else is correct.
Frequently asked questions
- What does "The component for route did not return a valid React element" mean?
- React Router throws this error when it instantiates the component that a route points at and that function fails to deliver a React element or null. Instead of producing JSX, the component returned undefined, a Promise, or simply reached the end of the body without yielding anything, so the router cannot continue rendering and surfaces the message before the DOM updates. The framework derives the component either from the routes you declare inside <Routes> or from the route objects you pass to createBrowserRouter/createRoutesFromElements.
- How do I fix "The component for route did not return a valid React element"?
- React Router reports this error when a route resolves to a component that returns something other than a React element (for example because it lacks a return value, is declared async, or falls through every branch).
- What causes "The component for route did not return a valid React element"?
- The function component matched by the route lacks a return statement or accidentally returns undefined in some path, so React receives an invalid render output. The route component is declared async, which makes it return a Promise instead of JSX; React Router cannot render promises without wrapping them in <Suspense> via lazy(). Conditional logic or early guards (e.g. feature flags, data checks) run to completion without returning anything, leaving the function implicitly returning undefined.
- Is the "The component for route did not return a valid React element" error serious?
- It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.