Warnung: PropType fehlgeschlagen: Ungültige Prop-„Komponente“ an „Route“ geliefert
Lesezeit: 3 Minuten
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;
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
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.
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:
Dies ist definitiv ein Syntaxproblem, als es mir passierte, entdeckte ich, dass ich getippt hatte
module.export = Component; Anstatt von module.exports = Component;
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
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.
14047200cookie-checkWarnung: PropType fehlgeschlagen: Ungültige Prop-„Komponente“ an „Route“ geliefertyes
Ist es ein Tippfehler in Ihrem Code oder Ihrer Frage,
module.exoprts
? Warum mischst du ES6 mit ES5? Verwenden Sie Importe überall, anstatt zu tunrequire
– 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