web-dev-qa-db-fra.com

Avertissement: Type de transaction en échec: prop, composant non valide, fourni à `Route`

J'essaie le nouveau react-routeur 1.0.0 et j'obtiens des avertissements étranges que je ne peux pas expliquer:

Avertissement: Type de transaction en échec: prop, composant non valide, fourni à `Route`.

Avertissement: `Composant` non défini non valide fourni à` 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'));

speaker.jsx:

import React from 'react';

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

module.exoprts = Speaker;

app.jsx a uniquement la fonction suivante render ():

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

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

Lorsque je tape l'itinéraire vers #/speaker ou #speaker - rien ne s'affiche sauf pour le titre. S'il vous plaît aider.

javascriptreactjsreact-routerreact-jsx
45
Alex Kovshovik

Normalisez les importations et les exportations de votre module, vous ne risquerez donc pas de rencontrer des problèmes de noms de propriété mal orthographiés.

module.exports = Component devraient devenir export default Component.

CommonJS utilise module.exports comme convention, cela signifie toutefois que vous travaillez avec un objet Javascript standard et que vous pouvez définir la valeur de la clé de votre choix (que ce soit exports, exoprts ou exprots). Il n'y a pas de contrôles d'exécution ou de compilation pour vous dire que vous vous êtes trompé.

Si vous utilisez plutôt la syntaxe ES6 (ES2015), vous utilisez alors la syntaxe et les mots-clés. Si vous tapez accidentellement exoprt default Component alors cela vous donnera une erreur de compilation à vous faire savoir.

Dans votre cas, vous pouvez simplifier la composante Haut-parleur.

import React from 'react';

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

il est résolu dans react-router-dom 4.4.0 voir: les types de route de la route échouent

maintenant c'est la version bêta, ou attendez simplement la version finale.

npm install [email protected] --save
14
ozan

Dans certains cas, comme le routage avec un composant encapsulé avec redux-form, remplaçant l'argument de composant Route sur cet élément JSX:

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

Avec l'argument de rendu Route comme ci-dessous, le problème sera résolu:

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

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

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

3
otoloye

C'est un problème de syntaxe lié aux importations/exportations dans vos fichiers, résolu en supprimant une citation supplémentaire de mon importation.

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

Si vous n'indiquez pas d'exportation par défaut, une erreur est générée. vérifiez si vous avez donné module.exports = Speaker; // erreur d'orthographe ici, vous avez écrit exoprts et vérifiez dans tous les modules si vous avez exporté correctement.

1
Lohitha Yalavarthi

Dans mon cas, je laisse mon . Js fichier vide signifie que je n'écris jamais rien dans mon . Js fichier après que je l'utilisais dans mon chemin alors make fonction composant ou composant de classe et enfin exportation cela fonctionnera

0
Krishna Kumar Jangid

[email protected] a également corrigé ce bogue, il suffit de le mettre à jour:

npm i --save react-router
0
Hayyaun

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

lien vers le numéro de github

0
Jayanga Jayathilake

Cette question est un peu ancienne, mais pour ceux qui arrivent encore ici et qui utilisent react-router 4. c'est un bogue et que j'ai corrigé dans la version bêta 4.4.. Il suffit de mettre à niveau votre routeur de réaction vers la version +4.4.0. Sachez que c'est une version beta en ce moment.

yarn add react-router@next

ou

npm install -s [email protected]
0
Guilherme