Warnung: Fehlgeschlagener Stützentyp: Ungültige Stütze "Komponente" an "Route" geliefert. & Warnung: [react-router] Ort "/" hat keine Route gefunden

Question

Ich spreche wenig english, sorry zuerst.

Ich habe einige ähnliche Fragen gesucht, aber nicht helfen. Ich kann nicht herausfinden, was passiert, ich bin fast 1 Stunde.

Ich beginne mein Projekt mit neusten Yeoman & Generator-react-Webpack.

Ein Fehler ist immer vorhanden. In der Browserkonsole.

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

hier ist 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')); 

Hier ist Indexpage.js.

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

und hier ist pages.js.

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

Answer 1

Auschecken, wenn die Dateinamen und Importanweisungen die richtige Schreibweise haben.

pages.js sollte P ages.js
Indexpage.js sollten Index P age.js

Oder ändern Sie es in den Import-Anweisungen .. seine case-sensitive sein sein.

Die docs sagt, dass Sie Ihre Routen mit einem Haupt Router wickeln müssen/

<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

Ihre pages.js hat einen falschen Klassennamen. Anstatt es auch als IndexPage aufzurufen, möchten Sie es wie folgt aufrufen: Seiten.