javascript - 警告 : Failed propType: Invalid prop 'component' supplied to 'route'

Question

当我在浏览器上运行我的应用程序时，我进入了我的控制台:

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

我的路线文件:

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;

我的 PView 文件:

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

谁能告诉我为什么会出现此错误？

Answer 1

我遇到了和你一样的问题。

当我将 connect() 组件放入 <Route /> 时，此警告必须存在。如果组件不是 connect() 组件，则不会出现问题。

解决方案

你可以换行

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

到

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

然后问题应该消失了。

思考

查看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.

因此，当您想定义 connect() 组件的路由时，您将隐式地将一些额外的 Prop 传递给它，然后根据文档，您应该使用 render 而不是组件。我想这就是发生警告的原因。