Question

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

＆＃34;警告：propType失败：无效的prop＆＃39;组件＆＃39;供应给＆＃39;路线＆＃39;＆＃34;

我的路线档案：

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

确保App，PContainer和PView都是有效的React组件。检查模块的导入和导出。导出应使用＆＃34;默认＆＃34;，否则您应使用命名导入：import {somecomp} from './somecomp'。检查您的组件路线。

您的路线看起来有点奇怪：'./container/PContainer/PContainer'和'./container/PView/PView'。

如果您没有 PContainer 和 PView 文件夹，可能应该是'./container/PContainer'和'./container/PView'。

Answer 2

我遇到了与您相同的问题。

当我将connect（）组件放入<Route />时，此警告必须存在。如果该组件不是connect（）组件，那么问题就不会存在。

解决方案

您可以更改行

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

到

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

然后问题就消失了。

思考

查看React-router

的文档

当您有一个现有组件时，应使用
component组件您想要的React.Component或无状态功能组件）渲染。带有内联函数的render仅应使用当您需要将范围内的变量传递给组件时，渲染。

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

Answer 3

最近，我遇到了这个问题。我发现如果您有任何导入的组件是空的或什么都不返回，那么就会出现这个问题，因为 React 无法将其视为有效组件。

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

警告：propType失败：无效的prop＆＃39;组件＆＃39;提供给＆＃39;路线＆＃39;

3 个答案: