首页 文章

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

提问于
浏览 次
32

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

警告：propType失败：提供给Route的无效prop组件 . 警告：提供给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:

import React from 'react';

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

module.exoprts = Speaker;

app.jsx only has the following render() function:

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

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

当我输入＃/ speaker或#speaker的路线时 - 除 Headers 外不显示任何内容 . 请帮忙 .

javascript reactjs react-router react-jsx

3 回答

  • 0

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

    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>
    )
  }
});
    回复于
  • 49

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

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

    回复于
  • 3

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

    回复于

相关问题