Warnung: PropType fehlgeschlagen: Ungültige Prop-„Komponente“ an „Route“ geliefert

Lesezeit: 3 Minuten

Benutzeravatar von Alex Kovshovik
Alex Kovshovik

Ich probiere den neuen React-Router 1.0.0 aus und bekomme seltsame Warnungen, die ich nicht erklären kann:

Warnung: PropType fehlgeschlagen: Ungültige Prop-„Komponente“ an „Route“ geliefert.

Warnung: Ungültige undefinierte „Komponente“ für „Route“ bereitgestellt.

Die App ist einfach:

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'));

Lautsprecher.jsx:

import React from 'react';

var Speaker = React.createClass({
  render() {
    return (
        <h1>Speaker</h1>
    )
  }
});

module.exoprts = Speaker;

app.jsx hat nur die folgende render() Funktion:

render() {
    return (
        <div>
            <Header title={this.state.title} status={this.state.status} />

            {this.props.children}
        </div>);
}

Wenn ich die Route zu #/speaker oder #speaker eingebe, wird außer dem Titel nichts angezeigt. Bitte helfen Sie.

  • Ist es ein Tippfehler in Ihrem Code oder Ihrer Frage, module.exoprts? Warum mischst du ES6 mit ES5? Verwenden Sie Importe überall, anstatt zu tun require

    – Henrik Andersson

    27. November 2015 um 4:56 Uhr


  • Wow! Einfach wow! Das war’s! Ich habe 50 Minuten lang gegoogelt und verschiedene Importstile ausprobiert – ES5 und ES6, aber es war ein einfacher Tippfehler. Vielen Dank @limelights! Du bist der Boss!

    – Alex Kovshovik

    27. November 2015 um 5:13 Uhr

  • Wenn Sie sich an einen Stil halten, werden diese Fehler in Zukunft reduziert, ich bin froh, dass es funktioniert hat!

    – Henrik Andersson

    27. November 2015 um 5:53 Uhr

  • Ich verspreche, dass ich einen Stil beibehalten werde 🙂 Würde sogar “class DaDum” anstelle von React.createClass({}) verwenden. Danke noch einmal!

    – Alex Kovshovik

    27. November 2015 um 14:18 Uhr

  • In meinem Fall mit ES2015 habe ich die Exportzeile einfach ganz vergessen.

    – Tyler Collier

    20. Januar 2016 um 17:17 Uhr

Benutzeravatar von Dan Prince
Dan Prinz

Standardisieren Sie die Importe und Exporte Ihres Moduls, dann riskieren Sie nicht, Probleme mit falsch geschriebenen Eigenschaftsnamen zu bekommen.

module.exports = Component soll werden export default Component.

CommonJS verwendet module.exports Als Konvention bedeutet dies jedoch, dass Sie nur mit einem regulären Javascript-Objekt arbeiten und den Wert eines beliebigen Schlüssels festlegen können (ob das exports, exoprts oder exprots). Es gibt keine Laufzeit- oder Kompilierungsprüfungen, die Ihnen mitteilen, dass Sie Fehler gemacht haben.

Wenn Sie stattdessen die ES6 (ES2015)-Syntax verwenden, arbeiten Sie mit Syntax und Schlüsselwörtern. Wenn Sie versehentlich tippen exoprt default Component dann wird es Ihnen einen Kompilierungsfehler geben, um Sie darüber zu informieren.

In Ihrem Fall können Sie die Lautsprecherkomponente vereinfachen.

import React from 'react';

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

Benutzeravatar von Ozan Honamlioglu
Ozan Honamlioğlu

Es ist in React-Router-Dom 4.4.0 gelöst, siehe: Die Proptypes der Route schlagen fehl

Jetzt ist es Beta, oder warten Sie einfach auf die endgültige Veröffentlichung.

npm install [email protected] --save

  • Es ist jetzt behoben, in der stabilen Version 5.0.0

    – Freddy Ochner

    20. März 2019 um 13:55 Uhr


Ich habe dieses Problem folgendermaßen gelöst:

Anstatt von

<Route path="https://stackoverflow.com/" component={HomePage} />

mach das

<Route
 path="https://stackoverflow.com/" component={props => <HomePage {...props} />} />

  • } />

    – Atom217

    28. Oktober 2021 um 6:09 Uhr

In einigen Fällen, z. B. beim Routing mit einer Komponente, die mit umschlossen ist redux-formErsetzen der Route Komponentenargument für dieses JSX-Element:

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

Mit dem Route Render-Argument wie das folgende, behebt das Problem:

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

Dies ist definitiv ein Syntaxproblem, als es mir passierte, entdeckte ich, dass ich getippt hatte

module.export = Component; Anstatt von module.exports = Component;

Benutzeravatar von Afaq Ahmed Khan
Afaq Ahmed Khan

Es handelt sich um ein Syntaxproblem im Zusammenhang mit Importen/Exporten in Ihren Dateien, das bei mir behoben wurde, indem ein zusätzliches Zitat aus meinem Import entfernt wurde

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

Benutzeravatar von Lohitha Yalavarthi
Lohitha Yalavarthi

Wenn Sie keinen Exportstandard angeben, wird ein Fehler ausgegeben. überprüfen Sie, ob Sie module.exports = Speaker angegeben haben; //Rechtschreibfehler hier hast du exoprts geschrieben und kontrolliere in allen Modulen ob du richtig exportiert hast.

1404720cookie-checkWarnung: PropType fehlgeschlagen: Ungültige Prop-„Komponente“ an „Route“ geliefert

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy