Warning: Failed propType: Invalid prop `component` supplied to `Route`

Question

I\'m trying new react-router 1.0.0 and I\'m getting strange warnings I can\'t explain:

Warning: Failed propType: Invalid prop `component` supplied to `Ro

Answer 1

If you are not giving export default then it throws an error. check if you have given module.exports = Speaker; //spelling mistake here you have written exoprts and check in all the modules whether you have exported correct.

Answer 2

In my case i leave my .js file empty means i never write anything in my .js file after that i was using it in my route so make function component or class component and finally export it will work

Answer 3

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 exports, exoprts 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>
    )
  }
});

Answer 4

It's a syntax issue related to imports/exports in your files, mine resolved by removing an extra quote from my import

<Route path={`${match.path}/iso-line-number`} component={ISOLineNumber} />

Answer 5

it is solved in react-router-dom 4.4.0 see: Route's proptypes fail

now it is beta, or just wait for final release.

npm install react-router-dom@4.4.0-beta.6 --save

Answer 6

react-router@3.2.3 also fixed this bug, just update it:

npm i --save react-router@latest