Question

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

警告：propType失败：提供的无效道具`组件`   `Route`。

警告：提供给`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，{{ 1}}或exoprts）。没有运行时或编译时间检查来告诉您已经搞砸了。

如果您使用ES6（ES2015）语法，那么您正在使用语法和关键字。如果您不小心输入exprots，那么它会给您一个编译错误，让您知道。

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

exoprt default Component

Answer 2

在react-router-dom 4.4.0中已解决，请参见：Route's proptypes fail

现在它是beta版，或者只是等待最终版本。

private void Form2_FormClosed(object sender, FormClosedEventArgs e)
{
    MessageBox.Show("Form 2 closed");
}

Answer 3

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

module.export = Component;代替module.exports = Component;

Answer 4

这是与文件导入/导出有关的语法问题，我的解决方法是从导入文件中删除多余的引号

<Route path={`${match.path}/iso-line-number`} component={ISOLineNumber} />

Answer 5

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

Answer 6

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

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

使用Route渲染参数，如下所示：

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

Answer 7

我通过以下方法解决了这个问题：

代替

            <FullCalendar 
              defaultView="dayGridMonth" 
              :plugins="calendarPlugins" 
              :events="events"
              :selectable="true"
              @select="handleSelect"
              @clickDate="handleDateClick"
              @eventClick="eventClick"
            />

执行此操作

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

Answer 8

就我而言，我将 .js 文件留空表示在路由中使用它之后，我再也不会在 .js 文件中写入任何内容因此制作功能组件或类组件，最后导出可以工作

Answer 9

这个问题有点老了，但是对于那些仍然到这里并使用 react-router 4.3 的人来说，这是一个错误，并已在4.4.0 beta版中得到了修复。。只需将您的react-router升级到+4.4.0版本即可。请注意，目前它是Beta版。

yarn add react-router@next

或

npm install -s react-router@4.4.0-beta.8

Answer 10

react-router-dom（v5）上有一个稳定的版本，已解决了该问题。

link to github issue

Answer 11

react-router@3.2.3也修复了该错误，只需对其进行更新：

npm i --save react-router

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

11 个答案: