javascript - 警告 : Failed propType: Invalid prop `component` supplied to `Route`

Question

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

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

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

Answer 1

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

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

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

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

在您的情况下，您可以简化 Speaker 组件。

import React from 'react';

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