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

IT技术 javascript reactjs react-router react-jsx
2021-05-02 03:24:43

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

警告:失败的 propType:提供给 `Route` 的 prop`component` 无效。

警告:提供给 `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'));

扬声器.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 的路径时 - 除了标题之外没有显示任何内容。请帮忙。

4个回答

标准化您的module的导入和导出,这样您就不会遇到拼写错误的属性名称的问题。

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

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

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

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

import React from 'react';

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

它在 react-router-dom 4.4.0 中解决,请参阅:Route's proptypes fail

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

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

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

代替

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

做这个

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

在某些情况下,例如使用包含 的组件进行路由redux-form,替换Route此 JSX 元素上组件参数:

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

使用如下所示的Route渲染参数,将解决问题:

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