javascript - react - Advertencia: PropType fallido: componente `prop` inválido suministrado a `Route`

react router tutorial

Question

Estoy probando el nuevo reac-router 1.0.0 y estoy recibiendo advertencias extrañas que no puedo explicar:

Advertencia: PropType fallido: componente `pro` inválido suministrado a `Route`.

Advertencia: `componente` indefinido no válido suministrado a` Ruta`.

La aplicación es 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 solo tiene la siguiente función render ():

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

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

Cuando escribo la ruta a # / speaker o #speaker, no se muestra nada excepto el título. Por favor ayuda.

Answer 1

Estandarice las importaciones y exportaciones de su módulo, entonces no se arriesgará a tener problemas con los nombres de propiedad mal escritos.

module.exports = Component debe convertirse en export default Component .

CommonJS utiliza module.exports como una convención, sin embargo, esto significa que solo está trabajando con un objeto Javascript regular y puede establecer el valor de cualquier clave que desee (ya sean exports , exoprts o exprots ). No hay controles de tiempo de ejecución ni de compilación para decirte que has cometido un error.

Si usa la sintaxis ES6 (ES2015), está trabajando con sintaxis y palabras clave. Si accidentalmente escribe exoprt default Component entonces le dará un error de compilación para hacerle saber.

En su caso, puede simplificar el componente Altavoz.

import React from ''react'';

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

Answer 2

Este es definitivamente un problema de sintaxis, cuando me sucedió, descubrí que escribí

module.export = Component; en lugar de module.exports = Component;