Cảnh báo: Không propType: prop không hợp lệ 'component` cung cấp cho `Route`

Question

Tôi đang cố gắng phản ứng-router mới 1.0.0 và tôi nhận được cảnh báo lạ Tôi không thể giải thích:

Cảnh báo: Không thành công propType: Phần tử không hợp lệ `component` được cung cấp cho ` Tuyến đường`.

Cảnh báo: Thành phần `không xác định 'không hợp lệ được cung cấp cho` Tuyến đường`.

Ứng dụng rất đơn giản:

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 chỉ có() chức năng sau đây render:

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

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

Khi tôi nhập vào tuyến đường đến #/loa hoặC#speaker - không có gì được hiển thị ngoại trừ tiêu đề. Hãy giúp tôi.

Answer 1

Chuẩn hóa nhập khẩu và xuất khẩu của mô-đun của bạn thì bạn sẽ không gặp rủi ro khi gặp sự cố với tên thuộc tính sai chính tả.

module.exports = Component nên trở thành export default Component.

CommonJS sử dụng module.exports như quy ước, tuy nhiên điều này có nghĩa là bạn chỉ làm việc với một đối tượng Javascript thường xuyên và bạn có thể thiết lập giá trị của bất kỳ phím nào bạn muốn (cho dù đó là exports, exoprts hoặc exprots). Không có thời gian chạy hoặc biên dịch kiểm tra thời gian để cho bạn biết rằng bạn đã sai lầm.

Nếu bạn sử dụng cú pháp ES6 (ES2015) thay vào đó, thì bạn đang làm việc với cú pháp và từ khóa. Nếu bạn vô tình nhập exoprt default Component thì nó sẽ cung cấp cho bạn một lỗi biên dịch để cho bạn biết.

Trong trường hợp của bạn, bạn có thể đơn giản hóa thành phần Loa.

import React from 'react'; 

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

Answer 2

này chắc chắn là một vấn đề cú pháp, khi nó đã xảy ra với tôi, tôi phát hiện ra tôi gõ

module.export = Component; thay vì module.exports = Component;