경고: 실패한 propType: 잘못된 prop 'component'가 'Route'에 제공됨

경고: 실패한 propType: 잘못된 prop 'component'가 'Route'에 제공됨

새로운 리액트 라우터 1.0.0을 사용하려고 하는데 설명할 수 없는 이상한 경고가 표시됩니다.

경고: 실패한 propType: 잘못된 prop 'component'가 'Route'에 제공되었습니다.

경고:"Route"에 제공된 정의되지 않은 "component"가 잘못되었습니다.

앱은 간단합니다.

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.speakerx:

import React from 'react';

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

module.exoprts = Speaker;

app.darender() 함수는 다음과 같습니다.

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

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

#/speaker 또는 #speaker 경로를 입력하면 제목 이외에는 아무것도 표시되지 않습니다.제발 도와주세요.

모듈의 Import 및 export를 표준화하면 맞춤법이 잘못된 속성 이름의 문제에 부딪힐 위험이 없습니다.

module.exports = Component가 되어야 한다export default Component.

CommonJs는module.exports단, 이는 일반적인 Javascript 오브젝트로 작업하고 있으며 원하는 키의 값을 설정할 수 있음을 의미합니다(그것이 무엇이든).exports,exoprts또는exprots) 실행 시 체크나 컴파일 시 체크가 이루어지지 않습니다.

대신 ES6(ES2015) 구문을 사용하는 경우 구문 및 키워드를 사용하는 것입니다.잘못 입력한 경우exoprt default Component컴파일 에러를 표시해, 통지합니다.

이 경우 스피커 컴포넌트를 단순화할 수 있습니다.

import React from 'react';

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

react-router-dom 4.4.0으로 해결됩니다.「루트의 프로프타입을 실패한다」를 참조해 주세요.

지금은 베타판입니다.아니면 최종 출시를 기다리면 됩니다.

npm install react-router-dom@4.4.0-beta.6 --save

경우에 따라서는 다음과 같은 컴포넌트를 사용하여 라우팅할 수 있습니다.redux-form, 의 교환Route이 JSX 요소의 component 인수:

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

를 사용하여Route다음과 같은 인수를 렌더링하면 문제가 해결됩니다.

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

이 문제는 다음과 같이 해결했습니다.

대신

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

이것을 하다

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

이건 분명 구문 문제예요. 제가 그런 일이 일어났을 때,

module.export = Component;대신module.exports = Component;

파일의 Import/export와 관련된 구문 문제이며 Import에서 추가 견적을 삭제하여 해결했습니다.

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

내보내기 기본값을 지정하지 않으면 오류가 발생합니다.module.module = Speaker(스피커)를 지정했는지 확인합니다. //여기서 exoprts(엑소프레트)를 잘못 입력했는지 확인하고 모든 모듈을 올바르게 내보냈는지 확인합니다.

에는 안정된 릴리스가 있습니다.react-router-dom(v5) 이 문제를 해결했습니다.

기트허브 문제와의 연계

내 경우 .js 파일을 비워두면 루트에서 사용 중인 후에는 .js 파일에 아무것도 쓰지 않으므로 함수 컴포넌트 또는 클래스 컴포넌트를 만들고 최종적으로 내보냅니다.

이 질문은 다소 오래되었지만, 리액트 라우터 4.3을 사용하고 있는 고객에게는 버그이며 베타 버전 4.4.0에서 수정되었습니다.리액트 라우터를 버전 +4.4.0으로 업그레이드하기만 하면 됩니다.현재 베타 버전임을 유의하십시오.

yarn add react-router@next

또는

npm install -s react-router@4.4.0-beta.8

react-parames@3.2.3에서도 이 버그가 수정되었습니다.업데이트만 해주세요.

npm i --save react-router@latest

언급URL : https://stackoverflow.com/questions/33950433/warning-failed-proptype-invalid-prop-component-supplied-to-route