Sometimes, we want to fix the ‘Warning: Failed propType: Invalid prop component supplied to Route‘ error with React Router.

In this article, we’ll look at how to fix the ‘Warning: Failed propType: Invalid prop component supplied to Route‘ error with React Router.

How to fix the ‘Warning: Failed propType: Invalid prop component supplied to Route‘ error with React Router?

To fix the ‘Warning: Failed propType: Invalid prop component supplied to Route‘ error with React Router, we should replace the component prop with the render prop and set that to a function that renders the component we want.

For instance, we write

<Route path="/dashboard" render={(props) => <Dashboard {...props} />} />;

to add a Route component with the render prop set to a function that renders the Dashboard component with the props spread into it.

Conclusion

To fix the ‘Warning: Failed propType: Invalid prop component supplied to Route‘ error with React Router, we should replace the component prop with the render prop and set that to a function that renders the component we want.