webentwicklung-frage-antwort-db.com.de

Warnung: PropType fehlgeschlagen: Ungültige Prop-Komponente an Route übergeben

Ich versuche es mit dem neuen React-Router 1.0.0 und bekomme seltsame Warnungen, die ich nicht erklären kann:

Warnung: PropType fehlgeschlagen: Ungültige Prop-Komponente an Route übergeben.

Warnung: Ungültige undefinierte "Komponente" für "Route".

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

speaker.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 #/Sprecher oder # Sprecher eingebe, wird nichts außer dem Titel angezeigt. Bitte helfen Sie.

45
Alex Kovshovik

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

module.exports = Component soll werden export default Component.

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

Wenn Sie stattdessen die ES6-Syntax (ES2015) verwenden, arbeiten Sie mit Syntax und Schlüsselwörtern. Wenn Sie versehentlich exoprt default Component dann erhalten Sie einen Kompilierungsfehler, der Sie darüber informiert.

In Ihrem Fall können Sie die Lautsprecherkomponente vereinfachen.

import React from 'react';

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

es ist in React-Router-Dom 4.4.0 gelöst. Siehe: Routes Requisiten scheitern

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

npm install [email protected] --save
14
ozan

In einigen Fällen, z. B. beim Routing mit einer Komponente, die mit redux-form Umschlossen ist, wird das Argument Route für dieses JSX-Element ersetzt:

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

Mit dem Argument Route render wie folgt wird das Problem behoben:

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

Dies ist definitiv ein Syntaxproblem, als mir auffiel, dass ich tippte

module.export = Component; anstatt module.exports = Component;

3
otoloye

Es handelt sich um ein Syntaxproblem im Zusammenhang mit Importen/Exporten in Ihre Dateien. Meines wurde behoben, indem ein zusätzliches Anführungszeichen aus meinem Import entfernt wurde

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

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

1

In meinem Fall lasse ich meine .js Datei leer, dh ich schreibe nie etwas in meine .js Datei danach habe ich es in meiner Route verwendet, also mache Funktionskomponente oder Klassenkomponente und schließlich exportieren es wird funktionieren

[email protected] hat diesen Fehler ebenfalls behoben, aktualisiere ihn einfach:

npm i --save react-router
0
Hayyaun

Es gibt eine stabile Version auf dem react-router-dom (v5) mit dem Fix für dieses Problem.

Link zur Github-Ausgabe

0

Diese Frage ist etwas alt, aber für diejenigen, die noch hier ankommen und react-router 4. verwenden, ist es ein Fehler und wurde behoben in der Beta-Version 4.4.. Aktualisieren Sie einfach Ihren React-Router auf Version +4.4.0. Beachten Sie, dass es sich derzeit um eine Beta-Version handelt.

yarn add [email protected]

oder

npm install -s [email protected]
0
Guilherme