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  Route   Warning  Invalid undefined  component  supplied to  Route    The app is simple   import React from  react   import ReactDOM from  react-dom   import   Router  Route   from  react-router    import App from    components app    var Speaker   require    components speaker     ReactDOM render        lt Router gt         lt Route path  quot   quot  component  App  gt             This is the source of the warning           lt Route path  quot speaker quot  component   Speaker    gt         lt  Route gt       lt  Router gt     document getElementById  react-container      speaker jsx  import React from  react    var Speaker   React createClass     render         return            lt h1 gt Speaker lt  h1 gt                 module exoprts   Speaker   app jsx only has the following render   function  render         return            lt div gt               lt Header title  this state title  status  this state status    gt                this props children           lt  div gt       When I type in the route to   speaker or  speaker - nothing is displayed except for title  Please help

User · Answer

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

User · Answer

There is an stable release on the react-router-dom  v5  with the fix for this issue   link to github issue

User · Answer

In some cases  such as routing with a component that s wrapped with redux-form  replacing the Route component argument on this JSX element    lt Route path  speaker  component  Speaker   gt    With the Route render argument like the following  will fix issue    lt Route path  speaker  render  props   gt   lt Speaker     props    gt     gt

User · Answer

react-router 3 2 3 also fixed this bug  just update it   npm i --save react-router latest

User · Answer

This question is a bit old  but for those still arriving here now and using react-router 4 3 it s a bug and got fixed in the beta version 4 4 0  Just upgrade your react-router to version  4 4 0  Be aware that it s a beta version at this moment   yarn add react-router next   or  npm install -s react-router 4 4 0-beta 8

User · Answer

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          lt h1 gt Speaker lt  h1 gt

User · Answer

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

User · Answer

It s a syntax issue related to imports exports in your files  mine resolved by removing an extra quote from my import   lt Route path     match path  iso-line-number   component  ISOLineNumber    gt

User · Answer

This is definitely a syntax issue  when it happened to me I discovered I typed   module export   Component  instead of module exports   Component

User · Answer

I solved this issue by doing this   instead of    lt Route path     component  HomePage    gt     do this   lt Route  path     component  props   gt   lt HomePage     props    gt     gt

User · Answer

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

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

Examples related to javascript

Examples related to reactjs

Examples related to react-router

Examples related to react-jsx