web-dev-qa-db-ja.com

警告：失敗したpropType：無効なprop `component`が` Route`に提供されました

私は新しい反応ルーター1.0.0を試していますが、説明できない奇妙な警告が出ています：

警告：失敗したpropType：無効なprop `component`が` 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へのルートを入力すると、タイトル以外は何も表示されません。助けてください。

javascriptreactjsreact-routerreact-jsx
45
Alex Kovshovik

モジュールのインポートとエクスポートを標準化すると、スペルの間違ったプロパティ名で問題が発生するリスクがなくなります。

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>
    )
  }
});
54
Dan Prince

react-router-dom 4.4.0で解決されました： ルートのproptypesが失敗します

現在はベータ版であるか、最終リリースを待っています。

npm install [email protected] --save
14
ozan

場合によっては、redux-formでラップされたコンポーネントでルーティングし、このJSX要素のRouteコンポーネント引数を置き換えます。

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

次のようなRouteレンダリング引数を使用すると、問題が修正されます。

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

これは間違いなく構文の問題です。それが私に起こったとき、私はタイプしたことを発見しました

module.export = Component;の代わりにmodule.exports = Component;

3
otoloye

これはファイルのインポート/エクスポートに関連する構文の問題です。インポートから余分な引用符を削除することで解決しました

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

エクスポートのデフォルトを指定していない場合、エラーがスローされます。 module.exports = Speaker;を指定したかどうかを確認してください。 //ここでスペルミスをして、exoprtsを書き、すべてのモジュールをチェックインして、正しくエクスポートしたかどうかを確認します。

1
Lohitha Yalavarthi

私の場合、。jsファイルを空のままにしておきます。つまり、ルートで使用した後、。jsファイルに何も書き込まないので、make function componentまたはclass componentそして最後にexport動作します

0
Krishna Kumar Jangid

[email protected]もこのバグを修正し、更新するだけです：

npm i --save react-router
0
Hayyaun

react-router-dom（v5）には、この問題の修正を含む安定したリリースがあります。

github issueへのリンク

0
Jayanga Jayathilake

この質問は少し古いですが、まだここに来てreact-router 4.を使用している人にとってはバグであり、ベータ版4.4.0で修正済みです。反応するルーターをバージョン+4.4.0にアップグレードするだけです。現時点ではベータ版であることに注意してください。

yarn add react-router@next

または

npm install -s [email protected]
0
Guilherme