警告：道具类型失败：提供给“路线”的道具属性无效。 ＆警告：[反应路由器]位置“ /”与任何路线均不匹配

Question

I speak little engilsh,sorry first.

I have searched some similar questions, but not help. Can't figure out what happen by myself, it almost spend me 1 hours.

I start my project with latest yeoman & generator-react-webpack.

Some error always exist.In the browser console.

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

here is 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'));

here is Indexpage.js .

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

and here is pages.js .

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

Answer 1

Checkout if the filenames and import statements have the correct spelling.

pages.js should be P ages.js
Indexpage.js should be Index P age.js

Or change it in the import statements.. its case-sensitive.

The docs says you have to wrap your Routes with a main Router /

  <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

Your pages.js has a wrong class name. Instead of also calling it as IndexPage, you want to call it as Pages like below.

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