Avertissement: Échec de la propType: Invalid prop `component` fourni `router`

Je suis en train d'essayer de nouveau réagir-routeur 1.0.0 et je reçois des avertissements étranges, je ne peux pas l'expliquer:

Avertissement: Échec de la propType: Invalid prop `composant` a fourni à
"Route".

Warning: Invalid undefined `composant` a fourni à la "Route".

L'application est simple:

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

haut-parleur.jsx:

import React from 'react';

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

module.exoprts = Speaker;

app.jsx seulement a la suite de render() fonction:

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

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

Lorsque je fais de la route pour #/haut-parleur ou #haut-parleur - rien ne s'affiche sauf pour le titre. S'il vous plaît aider.

Est-ce une faute de frappe dans votre code ou une question, module.exoprts? Pourquoi êtes-vous de mélange ES6 avec ES5? Le recours aux importations partout au lieu de faire require
Wow! Juste wow! Ce qu'il était! J'ai passé 50 minutes de googling, en essayant d'importation différents styles - ES5 et ES6, mais c'était une simple faute de frappe. Merci beaucoup @limelights! Vous êtes le patron!
En gardant un style permettra de réduire ces erreurs à l'avenir, content que ça a fonctionné!
Je promets que je vais garder un style à l'avenir 🙂 ce Serait même l'utilisation de "classe DaDum" au lieu de Réagir.createClass({}). Merci encore!
Dans mon cas, avec ES2015, j'ai tout simplement oublié de l'exportation de la ligne tout à fait.

InformationsquelleAutor Alex Kovshovik | 2015-11-27

54

Normaliser votre module, les importations et les exportations, alors vous ne risquez pas de frapper des problèmes avec mal orthographié les noms de propriété.

module.exports = Component devrait devenir export default Component.

CommonJS utilise module.exports de la convention, cependant, cela signifie que vous sont tout simplement de travailler avec un objet Javascript et vous êtes en mesure de définir la valeur de la clé que vous souhaitez (si c'est exports, exoprts ou exprots). Il n'y a pas d'exécution ou des contrôles de compilation pour vous dire que vous avez foiré.

Si vous utilisez ES6 (ES2015) de la syntaxe au lieu de cela, vous travaillez avec la syntaxe et les mots clés. Si vous avez accidentellement type exoprt default Component puis il vous donnera une erreur de compilation pour vous laisser savoir.

Dans votre cas, vous pouvez simplifier le haut-Parleur composant.
```
import React from 'react';

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

il est résolu à réagir-routeur-dom 4.4.0 voir: L'itinéraire proptypes échouer

maintenant, c'est une version bêta, ou tout simplement attendre pour la sortie de la version finale.
```
npm install react-router-dom@4.4.0-beta.6 --save
```
- C'est corrigé maintenant, dans la stabilité de la version 5.0.0
InformationsquelleAutor ozan
6

Dans certains cas, telles que le routage d'un composant qui est enveloppé avec redux-form, en remplacement de la Route composant argument sur ce JSX élément:
```
<Route path="speaker" component={Speaker}/>
```
Avec le Route argument rendu comme la suivante, fixer problème:
```
<Route path="speaker" render={props => <Speaker {...props} />} />
```
- Une telle transformation supprime avertissement en effet, mais que faire, si l'itinéraire attend des arguments, par exemple, d'essayer de transformer à partir d' <Route exact path='/order/:id' component={OrderPage}/> à <Route exact path='/order/:id' render={props => <OrderPage {...props} />}/> décompose l'utilisation de l'argument, il suffit de composant ne se sent pas à la valeur fournie pour l' :id de l'argument. Que faire?
- p.s. Je suis à l'aide de Réagir-Routeur version 5.0.1, donc, qui n'est pas la question. withAlert les causes du problème: const OrderPage = withAlert()(withRouter(connect(mapStateToProps, mapDispatchToProps)(ConnectedOrderPage))); Si je n'emballe pas le ConnectedOrderPage withAlert, alors il n'y a pas d'avertissement. github.com/schiehll/react-alert est le offeding fonctionnalité.
- Sont match objets qui ne sont pas accessibles à partir de la OrderPage(props)?
InformationsquelleAutor 5ervant
3

C'est certainement un problème de syntaxe, quand il m'est arrivé, j'ai découvert j'ai tapé

module.export = Component; au lieu de module.exports = Component;

InformationsquelleAutor otoloye
3

C'est un problème de syntaxe liés à l'importation et l'exportation de vos fichiers, la mine résolue par la suppression d'un extra citation de mon importation
```
<Route path={`${match.path}/iso-line-number`} component={ISOLineNumber} />
```
InformationsquelleAutor Afaq Ahmed Khan
1

Si vous ne donnez pas d'exportation par défaut, puis il déclenche une erreur.
vérifiez si vous disposez du module donné.les exportations = haut-Parleur; //erreur d'orthographe ici, vous avez écrit exoprts et de vérifier dans tous les modules que vous avez exporté les corriger.

InformationsquelleAutor Lohitha Yalavarthi
1

Il y a une version stable sur le react-router-dom (v5) avec le correctif de ce problème.

lien vers github problème
- Alors que la solution est sur le même avertissement, je ne suis pas sûr de savoir si cela résout le problème dans cette question. D'autres réponses et commentaires de l'auteur original de la question suggèrent que, ici, la cause est une faute de frappe. Si oui, cette réponse ne peut pas être utile.
- cet avertissement fait se pose en raison de problème d'incompatibilité entre réagir et réagir-routeur-dom.
InformationsquelleAutor Jayanga Jayathilake

J'ai résolu ce problème en faisant ceci:

au lieu de

<Route path="/" component={HomePage} />

ce faire

<Route
 path="/" component={props => <HomePage {...props} />} />

InformationsquelleAutor monireh d

0

Dans mon cas, j'ai laisser mon .js fichier vide
signifie que je n'ai jamais écrit quoi que ce soit dans mon .js fichier après que je l'utilise dans mon itinéraire
donc, assurez - l'élément de fonction ou composant de classe et enfin exportation il
va travailler

InformationsquelleAutor Krishna Kumar Jangid
0

Cette question est un peu vieux, mais pour ceux qui sont encore arriver ici, maintenant et à l'aide de réagir-routeur 4.3 c'est un bug et a obtenu fixe dans la version bêta de la version 4.4.0. Il suffit d'améliorer votre réagissent-routeur à la version +4.4.0.
Sachez que c'est une version bêta en ce moment.
```
yarn add react-router@next
```
ou
```
npm install -s react-router@4.4.0-beta.8
```
InformationsquelleAutor Guilherme
0

[email protected] aussi corrigé ce bug, juste le mettre à jour:
```
npm i --save react-router
```
InformationsquelleAutor Hayyaun

Vous devez vous connecter pour publier un commentaire.