Warning: Failed propType: Invalid prop `component` supplied to `Route`
JavascriptReactjsReact RouterReact JsxJavascript Problem Overview
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((
<Router>
<Route path="/" component={App}>
// This is the source of the warning:
<Route path="speaker" component={ Speaker }/>
</Route>
</Router>
), document.getElementById('react-container'));
speaker.jsx:
import React from 'react';
var Speaker = React.createClass({
render() {
return (
<h1>Speaker</h1>
)
}
});
module.exoprts = Speaker;
app.jsx only has the following render() function:
render() {
return (
<div>
<Header title={this.state.title} status={this.state.status} />
{this.props.children}
</div>);
}
When I type in the route to #/speaker or #speaker - nothing is displayed except for title. Please help.
Javascript Solutions
Solution 1 - Javascript
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>
)
}
});
Solution 2 - Javascript
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
Solution 3 - Javascript
I solved this issue by doing this:
instead of
<Route path="/" component={HomePage} />
do this
<Route
path="/" component={props => <HomePage {...props} />} />
Solution 4 - Javascript
In some cases, such as routing with a component that's wrapped with redux-form
, replacing the Route
component argument on this JSX element:
<Route path="speaker" component={Speaker}/>
With the Route
render argument like the following, will fix issue:
<Route path="speaker" render={props => <Speaker {...props} />} />
Solution 5 - Javascript
This is definitely a syntax issue, when it happened to me I discovered I typed
module.export = Component;
instead of module.exports = Component;
Solution 6 - Javascript
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} />
Solution 7 - Javascript
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.
Solution 8 - Javascript
There is an stable release on the react-router-dom
(v5) with the fix for this issue.
Solution 9 - Javascript
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
Solution 10 - Javascript
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
Solution 11 - Javascript
[email protected] also fixed this bug, just update it:
npm i --save react-router@latest