警告：propType失败：提供给`Route`的无效prop`组件` [英] Warning: Failed propType: Invalid prop `component` supplied to `Route`

问题描述

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

I'm trying new react-router 1.0.0 and I'm getting strange warnings I can't explain:

警告：proptype：无效的prop`组件`提供给
`Route`。

Warning: Failed propType: Invalid prop `component` supplied to `Route`.

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

Warning: Invalid undefined `component` supplied to `Route`.

该应用很简单：

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的路线时 - 什么都没有显示除标题外。请帮忙。

When I type in the route to #/speaker or #speaker - nothing is displayed except for title. Please help.

推荐答案

标准化您的模块的导入和导出，然后您不会冒着使用拼写错误的属性名称的问题。

Standardize your module's imports and exports then you won't risk hitting problems with misspelled property names.

module.exports = Component 应该变成导出默认组件。

CommonJS使用 module.exports 作为约定，但这意味着您只是使用常规Javascript对象而你能够设置你想要的任何键的值（无论是 exports ， exoprts 还是 exprots ）。没有运行时或编译时间检查来告诉您已经搞砸了。

CommonJS uses module.exports as 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, exoprts or exprots). There are no runtime or compile time checks to tell you that you've messed up.

如果您使用的是ES6（ES2015）语法，那么您正在使用语法和关键字。如果你不小心输入 exoprt默认组件那么它会给你一个编译错误让你知道。

If you use ES6 (ES2015) syntax instead, then you are working with syntax and keywords. If you accidentally type exoprt default Component then it will give you a compile error to let you know.

在你的你可以简化扬声器组件。

In your case you can simplify the Speaker component.

import React from 'react';

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

这篇关于警告：propType失败：提供给`Route`的无效prop`组件`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！