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

问题描述

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

<块引用>

警告:propType 失败:提供给的 prop`component` 无效`路线`.

警告:提供给 `Route` 的未定义 `component` 无效.

应用很简单:

从'react'导入React；从 'react-dom' 导入 ReactDOM；从反应路由器"导入{路由器，路由}；从'./components/app'导入应用程序；var Speaker = require('./components/speaker');ReactDOM.render((<路由器><路由路径="/";组件={应用}>//这是警告的来源:<路由路径=扬声器"组件={扬声器}/></路线></路由器>), document.getElementById('react-container'));

speaker.jsx:

从'react'导入React；var Speaker = React.createClass({使成为() {返回 (<h1>扬声器</h1>)}});module.exoprts = 扬声器；

app.jsx 只有以下 render() 函数:

render() {返回 (<div><Header title={this.state.title} status={this.state.status}/>{this.props.children}

);}

当我输入到#/speaker 或#speaker 的路径时 - 除了标题之外没有任何显示.请帮忙.

解决方案

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

module.exports = Component 应该变成export default Component.

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

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

就您而言，您可以简化扬声器组件.

从'react'导入React；导出默认 React.createClass({使成为() {返回 (<h1>扬声器</h1>)}});

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

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

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

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>);
}

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 should become export default Component.

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

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`component` 无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！