Javascript 警告：失败的 propType：提供给 `Route` 的 prop`component` 无效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33950433/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Warning: Failed propType: Invalid prop `component` supplied to `Route`
提问by Alex Kovshovik
I'm trying new react-router 1.0.0 and I'm getting strange warnings I can't explain:
我正在尝试新的 react-router 1.0.0，但收到了我无法解释的奇怪警告：
Warning: Failed propType: Invalid prop `component` supplied to `Route`.
Warning: Invalid undefined `component` supplied to `Route`.
警告：失败的 propType：提供给 `Route` 的 prop`component` 无效。
警告：提供给 `Route` 的未定义 `component` 无效。
The app is simple:
该应用程序很简单：
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:
扬声器.jsx：
import React from 'react';
var Speaker = React.createClass({
render() {
return (
<h1>Speaker</h1>
)
}
});
module.exoprts = Speaker;
app.jsx only has the following render() function:
app.jsx 只有以下 render() 函数：
render() {
return (
<div>
<Header title={this.state.title} status={this.state.status} />
{this.props.children}
</div>);
}
When I type in the route to #/speaker or #speaker - nothing is displayed except for title. Please help.
当我输入到#/speaker 或#speaker 的路径时 - 除了标题之外没有任何显示。请帮忙。
回答by Dan Prince
Standardize your module's imports and exports then you won't risk hitting problems with misspelled property names.
标准化您的模块的导入和导出，这样您就不会遇到拼写错误的属性名称的问题。
module.exports = Componentshould become export default Component.
module.exports = Component应该成为export default Component.
CommonJS uses module.exportsas a convention, however, this means that you are just working with a regular Javascript object and you are able to set the value of any key you want (whether that's exports, exoprtsor exprots). There are no runtime or compile-time checks to tell you that you've messed up.
module.exports但是，CommonJS用作约定，这意味着您只是在使用常规 Javascript 对象，并且可以设置所需的任何键的值（无论是exports,exoprts还是exprots）。没有运行时或编译时检查来告诉你你搞砸了。
If you use ES6 (ES2015) syntax instead, then you are working with syntax and keywords. If you accidentally type exoprt default Componentthen it will give you a compile error to let you know.
如果您改用 ES6 (ES2015) 语法，那么您正在使用语法和关键字。如果您不小心输入，exoprt default Component那么它会给您一个编译错误让您知道。
In your case, you can simplify the Speaker component.
在您的情况下，您可以简化扬声器组件。
import React from 'react';
export default React.createClass({
render() {
return (
<h1>Speaker</h1>
)
}
});
回答by ozan
it is solved in react-router-dom 4.4.0 see: Route's proptypes fail
它在 react-router-dom 4.4.0 中解决，请参阅：Route's proptypes fail
now it is beta, or just wait for final release.
现在是测试版，或者只是等待最终版本。
npm install [email protected] --save
回答by 5ervant
In some cases, such as routing with a component that's wrapped with redux-form, replacing the Routecomponent argument on this JSX element:
在某些情况下，例如使用包含 的组件进行路由redux-form，替换Route此 JSX 元素上的组件参数：
<Route path="speaker" component={Speaker}/>
With the Routerender argument like the following, will fix issue:
使用如下所示的Route渲染参数，将解决问题：
<Route path="speaker" render={props => <Speaker {...props} />} />
回答by monireh d
I solved this issue by doing this:
我通过这样做解决了这个问题：
instead of
代替
<Route path="/" component={HomePage} />
do this
做这个
<Route
path="/" component={props => <HomePage {...props} />} />
回答by Afaq Ahmed Khan
It's a syntax issue related to imports/exports in your files, mine resolved by removing an extra quote from my import
这是与文件中的导入/导出相关的语法问题，通过从导入中删除额外的引号解决了我的问题
<Route path={`${match.path}/iso-line-number`} component={ISOLineNumber} />
回答by otoloye
This is definitely a syntax issue, when it happened to me I discovered I typed
这绝对是一个语法问题，当它发生在我身上时，我发现我输入了
module.export = Component;instead of module.exports = Component;
module.export = Component;代替 module.exports = Component;
回答by Lohitha Yalavarthi
If you are not giving export default then it throws an error. check if you have given module.exports = Speaker; //spelling mistake here you have written exoprts and check in all the modules whether you have exported correct.
如果您没有提供导出默认值，则会引发错误。检查你是否给了 module.exports = Speaker; //这里拼写错误你写了exoprts并检查所有模块是否导出正确。
回答by Jayanga Jayathilake
There is an stable release on the react-router-dom(v5) with the fix for this issue.
react-router-dom(v5)上有一个稳定版本，修复了这个问题。
回答by Hayyaun
[email protected] also fixed this bug, just update it:
[email protected] 也修复了这个bug，更新一下：
npm i --save react-router
回答by Krishna Kumar Jangid
In my case i leave my .jsfile empty means i never write anything in my .jsfile after that i was using it in my route so make function componentor class componentand finally exportit will work
在我的情况下，我将我的.js文件留空意味着在我在我的路由中使用它之后我再也不会在我的.js文件中写任何东西，所以制作函数组件或类组件并最终导出它会起作用
