警告：失败的道具类型：为“路线”提供的道具“组件”无效

Question

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

“警告：失败的propType:为‘路由’提供的prop‘组件’无效”

我的路由文件：

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

最近，我经历了这一期。我发现，如果你有任何导入的组件是空的或什么也不返回，那么就会出现这个问题，因为反应不能将其视为有效的组件。

看看你是否有任何你可能留下空的组件。

Answer 2

确保App、PContainer和PView都是有效的React组件。检查模块的导入和导出。导出应使用“default”，否则应使用命名的导入：import{somecomp}from'/somecomp'。检查到组件的路由。

您的路由看起来有点奇怪：'。/容器/PContainer/PContainer'和'。/容器/PView/PView'。

如果您没有PContainer和PView文件夹，也许应该是'./容器/PContainer'和'./容器/PView'。

Answer 3

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

当我将connect（）组件放入

解决方案

你可以改变路线

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

到

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

那问题就应该解决了。

思考

看看React-router的文档

当您有要呈现的现有组件（React.component或无状态函数组件）时，应该使用组件。render采用内联函数，仅当必须将作用域变量传递给要渲染的组件时才应使用。

因此，当您想要定义connect（）组件的路由时，您将隐式地向其中传递一些附加的道具，然后根据文档，您应该使用render而不是component。我想这就是警告发生的原因。