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.
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>
)
}
});
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
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} />} />
Dies ist definitiv ein Syntaxproblem, als mir auffiel, dass ich tippte
module.export = Component;
anstatt module.exports = Component;
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} />
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.
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
Es gibt eine stabile Version auf dem react-router-dom
(v5) mit dem Fix für dieses Problem.
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]