警告：失败的 propType：提供给 `Route` 的无效 prop `component`

Posted 2023-02-21

【中文标题】警告：失败的 propType：提供给 `Route` 的无效 prop `component`

【英文标题】：Warning: Failed propType: Invalid prop `component` supplied to `Route`

【发布时间】：2016-03-01 05:53:36

【问题描述】：

我正在尝试新的 react-router 1.0.0，但收到了我无法解释的奇怪警告：

警告：失败的 propType：无效的 prop `component` 提供给 `路线`。

警告：为 `Route` 提供了无效的未定义`component`。

应用很简单：

import React from 'react';
import ReactDOM from 'react-dom';
import  Router, Route  from 'react-router';

import App from './components/app';

var Speaker = require('./components/speaker');

ReactDOM.render((
    <Router>
      <Route path="/" component=App>
        // This is the source of the warning:
        <Route path="speaker" component= Speaker />
      </Route>
    </Router>
), document.getElementById('react-container'));

speaker.jsx：

import React from 'react';

var Speaker = React.createClass(
  render() 
    return (
        <h1>Speaker</h1>
    )
  
);

module.exoprts = Speaker;

app.jsx 只有以下 render() 函数：

render() 
    return (
        <div>
            <Header title=this.state.title status=this.state.status />

            this.props.children
        </div>);

当我输入到#/speaker 或#speaker 的路线时 - 除了标题之外什么都没有显示。请帮忙。

【问题讨论】：

是您的代码或问题中的拼写错误，module.exoprts？另外，为什么要将 ES6 与 ES5 混合使用？到处使用导入而不是 require

哇！哇！就是这样！我花了 50 分钟在谷歌上搜索，尝试了不同的导入样式 - ES5 和 ES6，但这是一个简单的错字。非常感谢@limelights！你是老板！

保持一种风格会在未来减少这些错误，很高兴它成功了！

我保证我会继续保持一种风格:) 甚至会使用“class DaDum”而不是 React.createClass()。再次感谢！

在我使用 ES2015 的情况下，我完全忘记了导出行。

【参考方案1】：

react-router@3.2.3 也修复了这个bug，更新一下即可：

npm i --save react-router@latest

【参考方案2】：

标准化您的模块的导入和导出，这样您就不会遇到拼写错误的属性名称的问题。

module.exports = Component 应该变成export default Component。

CommonJS 使用 module.exports 作为约定，但是，这意味着您只是在使用常规 javascript 对象，并且您可以设置所需的任何键的值（无论是 exports、exoprts 还是exprots)。没有运行时或编译时检查来告诉您您搞砸了。

如果您改用 ES6 (ES2015) 语法，那么您正在使用语法和关键字。如果你不小心输入了exoprt default Component，那么它会给你一个编译错误让你知道。

在您的情况下，您可以简化扬声器组件。

import React from 'react';

export default React.createClass(
  render() 
    return (
      <h1>Speaker</h1>
    )
  
);

【参考方案3】：

我通过这样做解决了这个问题：

而不是

<Route path="/" component=HomePage />

这样做

<Route
 path="/" component=props => <HomePage ...props /> />

【讨论】：

/>

【参考方案4】：

react-router-dom (v5) 上有一个稳定版本，其中包含此问题的修复程序。

link to github issue

【讨论】：

虽然修复是关于相同的警告，但我不确定它是否解决了这个问题中的问题。该问题的原始作者的其他答案和 cmets 表明，这里的原因是一个错字。如果是这样，这个答案可能没有帮助。

这个警告实际上是由于 react 和 react-router-dom 之间的不兼容问题引起的。

【参考方案5】：

这个问题有点老了，但是对于那些现在仍然来到这里并使用 react-router 4.3 的人来说，这是一个错误，并且在测试版 4.4.0 中得到了修复 .只需将您的 react-router 升级到版本 +4.4.0。 请注意，它目前是测试版。

yarn add react-router@next

或

npm install -s react-router@4.4.0-beta.8

【参考方案6】：

在我的情况下，我将 .js 文件留空 意味着我从来没有在我的 .js 文件中写任何东西，之后我在我的路线中使用它 所以制作函数组件或类组件，最后导出 会工作的

【参考方案7】：

在某些情况下，例如使用 redux-form 包装的组件进行路由，替换此 JSX 元素上的 Route 组件参数：

<Route path="speaker" component=Speaker/>

使用如下Route 渲染参数，将解决问题：

<Route path="speaker" render=props => <Speaker ...props /> />

【讨论】：

这种转换确实消除了警告，但是如果路由需要参数，例如，该怎么办？尝试从 <Route exact path='/order/:id' component=OrderPage/> 转换为 <Route exact path='/order/:id' render=props => <OrderPage ...props />/> 会破坏参数的使用，只是组件感觉不到为 :id 参数提供的值。怎么办？

附注我使用的是 React-Router 5.0.1 版本，所以，这不是问题。 withAlert 导致问题： const OrderPage = withAlert()(withRouter(connect(mapStateToProps, mapDispatchToProps)(ConnectedOrderPage)));如果我不使用警报包装 ConnectedOrderPage，则没有警告。 github.com/schiehll/react-alert 是即将推出的功能。

@TomR 是否无法从 OrderPage(props) 访问 match 对象？

【参考方案8】：

它已在 react-router-dom 4.4.0 中解决，请参阅：Route's proptypes fail

现在是测试版，或者等待最终版本。

npm install react-router-dom@4.4.0-beta.6 --save

【讨论】：

现在已经修复，稳定版5.0.0

【参考方案9】：

这是与文件中的导入/导出相关的语法问题，我通过从导入中删除额外的引号解决了

<Route path=`$match.path/iso-line-number` component=ISOLineNumber />

【参考方案10】：

如果您没有给出导出默认值，则会引发错误。 检查你是否给了 module.exports = Speaker; //这里的拼写错误你已经写了exoprts并检查所有模块你是否导出正确。

【参考方案11】：

这绝对是语法问题，当它发生在我身上时，我发现我输入了

module.export = Component; 而不是module.exports = Component;