Warning: Failed propType: Invalid prop 'component' supplied to 'route'

Question

When I run the my app on browser I get on my console:

"Warning: Failed propType: Invalid prop 'component' supplied to 'route'"

My routes file:

import { Route, IndexRoute } from 'react-router';
import React from 'react';
import App from './container/App';
import PContainer from './container/PContainer/PContainer';
import PView from './container/PView/PView';

const routes = (
 <Route path="/" component={App} >
  <IndexRoute component={PContainer} />
  <Route path="/Posts View" component={PView} />
 </Route>
);

export default routes;

My PView file:

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

class PView extends Component {

 render() {
  return (
    <div>
     <h1>List of Posts</h1>
   </div>
  );
 }
}

export default connect()(PView);

Can anyone tell me why I am getting this error?

Answer 1

I met the same issue as you.

When I put a connect() component into <Route />, this warning must be there. If the component is not a connect() one, then the issue will not be there.

Solution

You can change the line

<Route path="/Posts View" component={PView} />

to

<Route path="/Posts View" render={(props) => <PView {...props} />} />

then the issue should go away.

Thinking

Look at the document of React-router

component should be used when you have an existing component (either a React.Component or a stateless functional component) that you want to render. render, which takes an inline function, should only be used when you have to pass in-scope variables to the component you want to render.

So when you would like to define a route of connect() component, you are implicitly going to pass some additional props into it, then according to the document you should use render instead of component. I guess this is the reason of warning happened.

Answer 2

Make sure that App, PContainer, and PView are all valid React components. Check module's imports and exports. Export should be with "default", otherwise you should use named import: import {somecomp} from './somecomp'. Check your routes to components.

Your routes look a bit weird: './container/PContainer/PContainer' and './container/PView/PView'.

Maybe it should be './container/PContainer' and './container/PView', if you don't have PContainer and PView folders.

Answer 3

Recently, I have been through this issue. I found that if you have any imported component which is empty or returning nothing then this issue arises because react could not consider it as a valid component.

Have a look if you have any component that you might have left empty.