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

"Warning: Failed propType: Invalid prop 'ponent' 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="/" ponent={App} >
  <IndexRoute ponent={PContainer} />
  <Route path="/Posts View" ponent={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?

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

"Warning: Failed propType: Invalid prop 'ponent' 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="/" ponent={App} >
  <IndexRoute ponent={PContainer} />
  <Route path="/Posts View" ponent={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?

• javascript
• reactjs
• redux
• react-router
• react-redux

• are space allowed in route path like ` <Route path="/Posts View" ponent={PView} />` ?? – Vikramaditya Commented Jun 22, 2016 at 6:42
• yes it is allowed. – imran shoukat Commented Jun 22, 2016 at 6:46
• 1 Possible duplicate of Warning: Failed propType: Invalid prop `ponent` supplied to `Route` – James111 Commented Jun 22, 2016 at 6:48
• @James111 The previous question was due to a typo. I don't see any typo here. – Quentin Roy Commented Jun 22, 2016 at 6:53
• Are you sure problem es from PView?, It seems App is given to a route too. IsApp well exported? – Damien Leroux Commented Jun 22, 2016 at 7:15

3 Answers 3

I met the same issue as you.

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

Solution

You can change the line

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

to

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

then the issue should go away.

Thinking

Look at the document of React-router

ponent should be used when you have an existing ponent (either a React.Component or a stateless functional ponent) 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 ponent you want to render.

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

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

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.

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

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