Avviso: impossibile PropType: prop non valido `component` fornito a` Route`

Question

sto cercando nuovi reagire-router 1.0.0 e sto ottenendo strani avvertimenti che non so spiegare:

Attenzione: PropType non riuscito: Prop `componente` non valido fornito a ` Route`.

Avviso: `componente` non definito non valido fornito a` Route`.

L'applicazione è semplice:

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 ha la seguente rendering) Funzione (:

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

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

Quando si digita il percorso su #/altoparlante o #speaker - non viene visualizzato nulla, ad eccezione del titolo. Per favore aiuto.

Answer 1

Standardizza le importazioni e le esportazioni del modulo, quindi non rischierai di imbattersi in problemi con nomi di proprietà con errori di ortografia.

module.exports = Component dovrebbe diventare export default Component.

CommonJS utilizza module.exports come convention, tuttavia questo significa che si sta solo lavorando con un normale oggetto Javascript e si è in grado di impostare il valore di qualsiasi chiave che si desidera (se questo è exports, exoprts o exprots). Non ci sono runtime o controlli di compilazione per dirti che hai incasinato.

Se si utilizza invece la sintassi ES6 (ES2015), si sta lavorando con sintassi e parole chiave. Se digiti per errore exoprt default Component allora ti verrà dato un errore di compilazione per farti sapere.

Nel tuo caso puoi semplificare il componente Altoparlante.

import React from 'react'; 

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

Answer 2

Questo è sicuramente un problema di sintassi, quando è successo a me ho scoperto ho digitato

module.export = Component; invece di module.exports = Component;