警告：失败的proptype：无效的prop`component`提供给`route`

Question

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

该应用程序很简单：

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;

jsx只有以下render（）函数：

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

            {this.props.children}
        </div>);
}

当我输入到#/speaker或#speaker的路由时，除了title之外，什么都不会显示。请帮忙。

Answer 1

标准化模块的导入和导出，那么您就不会冒着遇到拼写错误的属性名问题的风险。

module.exports=component应该成为export默认组件。

CommonJS使用module.exports作为惯例，但是，这意味着您只是使用一个常规的Javascript对象，并且可以设置您想要的任何键的值（无论是exports、exprots)，还是exprots)。没有运行时或编译时检查来告诉您已经搞砸了。

如果您使用ES6(ES2015)语法，那么您使用的是语法和关键字。如果您不小心键入exoprt default component，那么它会给您一个编译错误。

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

import React from 'react';

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