Предупреждение: Ошибка propType: недопустимый параметр `` `` `` `, указанный в` Route`

Я пытаюсь использовать new response-router 1.0.0, и я получаю странные предупреждения, которые я не могу объяснить:

Предупреждение: сбой propType: недопустимый параметр prop `component`, поставляемый в `Route`.

Предупреждение: недействительный undefined `component`, указанный в` Route`.

Приложение прост:  

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 - ничего не отображается, кроме заголовка. Пожалуйста, помогите.

Ответы

Ответ 1

Стандартизируйте импорт и экспорт вашего модуля, чтобы не было проблем с именами свойств с ошибками.

module.exports = Component должен стать export default Component.

CommonJS использует module.exports в качестве соглашения, однако это означает, что вы просто работаете с обычным объектом Javascript и можете установить значение любой клавиши, которую хотите (будь то exports, exoprts или exprots).). Нет никаких проверок времени выполнения или компиляции, чтобы сказать вам, что вы испортили.

Если вы вместо этого используете синтаксис ES6 (ES2015), то вы работаете с синтаксисом и ключевыми словами. Если вы случайно наберете exoprt default Component, это даст вам ошибку компиляции, чтобы вы знали.

В вашем случае вы можете упростить компонент Speaker.

import React from 'react';

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

Ответ 3

В некоторых случаях, например, при маршрутизации с компонентом, обернутым в соответствии с redux-form, замена аргумента компонента Route в этом элементе JSX:

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

С помощью аргумента Route render, подобного следующему, исправим проблему:

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

Ответ 4

Это определенно проблема синтаксиса, когда это случилось со мной, я обнаружил, что набрал

module.export = Component; вместо module.exports = Component;

Ответ 5

Это проблема синтаксиса, связанная с импортом/экспортом в ваших файлах, моя была решена путем удаления дополнительной цитаты из моего импорта

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

Ответ 6

Если вы не задаете экспорт по умолчанию, выдается ошибка. проверьте, указали ли вы module.exports = Speaker; // орфографическая ошибка здесь вы написали exoprts и проверьте все модули, правильно ли вы экспортировали.

Ответ 7

В моем случае я оставляю свой файл .js пустым, что означает, что я никогда ничего не пишу в своем файле .js, после этого я использовал его в своем маршруте, поэтому сделайте компонент функции или компонент класса и, наконец, экспортируйте его, чтобы он работал

Ответ 8

Этот вопрос немного устарел, но для тех, кто все еще прибывает сюда сейчас и использует response-router 4.3, это ошибка, и она была исправлена в бета-версии 4.4.0. Просто обновите ваш реактивный маршрутизатор до версии +4.4.0. Имейте в виду, что это бета-версия в данный момент.

yarn add [email protected]

или же

npm install -s [email protected]

Ответ 10

[email protected] также исправил эту ошибку, просто обновите ее:

npm i --save react-router

Ответ 11

Я решил эту проблему следующим образом:

вместо

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

сделать это

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