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

Question

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

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

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

该应用很简单:

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那么它会给你一个编译错误让你知道.

在您的情况下,您可以简化扬声器组件.

import React from 'react';

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

Answer 2

我通过这样做解决了这个问题：

代替

<Route path="/" component={HomePage} />

做这个

<Route
 path="/" component={props => <HomePage {...props} />} />

Answer 3

它在react-router-dom 4.4.0中解决,请参阅:https://github.com/ReactTraining/react-router/issues/6420

现在它是测试版,或者只是等待最终版本.

npm install react-router-dom@4.4.0-beta.6 --save

Answer 4

在某些情况下，例如使用包裹了的组件进行路由redux-form，替换Route此JSX元素上的component参数：

<Route path="speaker" component={Speaker}/>

使用如下所示的Routerender参数将解决问题：

<Route path="speaker" render={props => <Speaker {...props} />} />