sadmark sadmark - 4 months ago 338
React JSX Question

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

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

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

pages.js should be Pages.js
Indexpage.js should be IndexPage.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>
  )