警告：失敗した小道具の種類： `ルート 'に供給された無効な小道具`コンポーネント `。 ＆警告：[react-router]場所 "/"はどのルートとも一致しませんでした

Question

私は少しengilsh、申し訳ありませんが最初に話す。

私は類似の質問をいくつか検索しましたが、助けにはなりません。 自分で何が起こったのか分かりません。ほとんど1時間かかります。

最新のyeoman & generator-react-webpackでプロジェクトを開始します。

エラーは常に存在します。ブラウザのコンソールにあります。

Warning: Failed prop type: Invalid prop `children` supplied to`Router`. 
Warning: [react-router] Location "/" did not match any routes 

ここはindex.jsです。

import 'core-js/fn/object/assign'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Router, Route, hashHistory, IndexRoute} from 'react-router'; 

import IndexPage from './components/IndexPage'; 
import Pages from './components/Pages'; 

ReactDOM.render((
    <Router history={hashHistory}> 
     <Route path="/" component={IndexPage} /> 
     <Route path="/pages" component={Pages} /> 
    </Router> 
), document.getElementById('webapp')); 

ここはIndexpage.jsです。

import React, {Component} from 'react'; 
export default class IndexPage extends Component { 
    render() { 
     return (
      <div>1234</div> 
     ) 
    } 
} 

ここではpages.jsです。

import React, {Component} from 'react'; 
export default class Pages extends Component { 
    render() { 
     return (
      <div>9876</div> 
     ) 
    } 
} 

Answer 1

ファイル名とインポート文のスペルが正しいかどうかをチェックアウトします。

pages.jsは
Indexpage.jsがP age.js

インデックスであるか、またはその大文字と小文字を区別... import文でそれを変更する必要がありP ages.jsでなければなりません。

ドキュメントは、あなたがメインのルータを使用してルートをラップする必要があると言う/

<Router history={browserHistory}> 
    <Route path="/" component={App}> 

     <Route path="about" component={About}/> 
     <Route path="users" component={Users}> 
     <Route path="/user/:userId" component={User}/> 
     </Route> 
     <Route path="*" component={NoMatch}/> 

    </Route> 
    </Router> 

    // this is the main App component 
    const App = ({children}) => (
    <div id="main-layout">{children}</div> 
) 

Answer 2

あなたpages.jsは、間違ったクラス名を持っています。 IndexPageとして呼び出すのではなく、ページと呼びたいと思っています。

import React, {Component} from 'react'; 
export default class Pages extends Component { 
    render() { 
     return (
      <div>9876</div> 
     ) 
    } 
}