close

[Solved] Warning: Failed propType: Invalid prop `component` supplied to `Route`

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Warning: Failed propType: Invalid prop component supplied to Route in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How Warning: Failed propType: Invalid prop component supplied to Route Error Occurs?

Today I get the following error Warning: Failed propType: Invalid prop component supplied to Route in javascript.

How To Solve Warning: Failed propType: Invalid prop component supplied to Route Error ?

  1. How To Solve Warning: Failed propType: Invalid prop component supplied to Route Error ?

    To Solve Warning: Failed propType: Invalid prop component supplied to Route Error There is an stable release on the react-router-dom (v5) with the fix for this issue.

  2. Warning: Failed propType: Invalid prop component supplied to Route

    To Solve Warning: Failed propType: Invalid prop component supplied to Route Error There is an stable release on the react-router-dom (v5) with the fix for this issue.

Solution 1

Standardize your module’s imports and exports then you won’t risk hitting problems with misspelled property names.

module.exports = Component should become export default Component.

CommonJS uses module.exports as a convention, however, this means that you are just working with a regular Javascript object and you are able to set the value of any key you want (whether that’s exportsexoprts or exprots). There are no runtime or compile-time checks to tell you that you’ve messed up.

If you use ES6 (ES2015) syntax instead, then you are working with syntax and keywords. If you accidentally type exoprt default Component then it will give you a compile error to let you know.

In your case, you can simplify the Speaker component.

import React from 'react';

export default React.createClass({
  render() {
    return (
      <h1>Speaker</h1>
    )
  }
});

Solution 2

There is an stable release on the react-router-dom (v5) with the fix for this issue.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment