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((
    <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.

Is it a typo in your code or question, `module.exoprts`? Also why are you mixing ES6 with ES5? Use imports everywhere instead of doing `require` — Henrik Andersson, Nov 27 '15 at 04:56
Wow! Just wow! This was it! I spent 50 minutes googling, trying different import styles - ES5 and ES6, but it was a simple typo. Thank you very much @limelights! You're the boss! — Alex Kovshovik, Nov 27 '15 at 05:13
Keeping to one style will reduce these errors in the future, glad it worked! — Henrik Andersson, Nov 27 '15 at 05:53
I promise I will keep one style going forward :) Would even use "class DaDum" instead of React.createClass({}). Thanks again! — Alex Kovshovik, Nov 27 '15 at 14:18
In my case with ES2015, I simply forgot the export line altogether. — Tyler Collier, Jan 20 '16 at 17:17

score 61 · Answer 1 · edited Sep 20 '19 at 12:40

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>
    )
  }
});

score 22 · Answer 2 · edited Mar 13 '19 at 12:10

22

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

edited Mar 13 '19 at 12:10

Afaq Ahmed Khan

2,164
2
29
39

answered Jan 20 '19 at 18:31

Ozan Honamlioglu

765
1
8
20

6

It's fixed now, in the stable version 5.0.0 – Freddy Ochner Mar 20 '19 at 13:55

score 21 · Answer 3 · answered Sep 20 '19 at 12:39

21

I solved this issue by doing this:

instead of

<Route path="/" component={HomePage} />

do this

<Route
 path="/" component={props => <HomePage {...props} />} />

answered Sep 20 '19 at 12:39

Moni

826
10
15

} /> – atom217 Oct 28 '21 at 06:09

score 20 · Answer 4 · answered Mar 19 '19 at 11:35

20

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} />} />

answered Mar 19 '19 at 11:35

5ervant - techintel.github.io

4,381
7
39
68

Such transformation removes warning indeed, but what to do, if the route expects arguments, e.g. trying to transform from `` to ` }/>` breaks down the use of the argument, simply component does not feel the provided value for the :id argument. What to do? – TomR Sep 23 '19 at 09:08
p.s. I am using React-Router 5.0.1 version, so, that is not the issue. withAlert causes the problem: const OrderPage = withAlert()(withRouter(connect(mapStateToProps, mapDispatchToProps)(ConnectedOrderPage))); If I don't wrap the ConnectedOrderPage withAlert, then there is no warning. https://github.com/schiehll/react-alert is the offeding feature. – TomR Sep 23 '19 at 09:23
@TomR Are `match` objects not accessible from the `OrderPage(props)`? – 5ervant - techintel.github.io Sep 23 '19 at 20:50

score 3 · Answer 5 · answered Mar 10 '17 at 09:36

3

This is definitely a syntax issue, when it happened to me I discovered I typed

module.export = Component; instead of module.exports = Component;

answered Mar 10 '17 at 09:36

otoloye

677
7
11

score 3 · Answer 6 · answered Mar 13 '19 at 11:44

3

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} />

answered Mar 13 '19 at 11:44

Afaq Ahmed Khan

2,164
2
29
39

score 2 · Answer 7 · answered Nov 05 '18 at 02:49

2

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.

answered Nov 05 '18 at 02:49

Lohitha Yalavarthi

21
2

score 1 · Answer 8 · answered Jun 07 '19 at 06:09

1

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

link to github issue

answered Jun 07 '19 at 06:09

Jayanga Jayathilake

529
7
9

1

While the fix is about the same warning, I am not sure whether it fixes the issue in this question. Other answers and comments of the original author of the question suggest that here, the cause is a typo. If so, this answer may not be helpful. – hlg Jun 07 '19 at 06:33
this warning actually arises due to incompatibility issue in between react and react-router-dom. – Jayanga Jayathilake Jun 08 '19 at 15:31

score 0 · Answer 9 · answered Mar 28 '19 at 09:10

0

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

answered Mar 28 '19 at 09:10

Krishna Jangid

4,961
5
27
33

score 0 · Answer 10 · answered Apr 13 '19 at 10:36

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

Hayyaun · Answer 11 · 2020-06-02T11:10:49.620

0

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

npm i --save react-router@latest

edited Jun 02 '20 at 11:10

answered Jul 13 '19 at 21:37

Hayyaun

303
3
10

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

11 Answers11

Linked