警告:失败的道具类型:提供给`Route`的无效道具`组件`。 &安培;警告:[react-router]位置“/”与任何路由都不匹配

时间:2016-08-08 14:16:18

标签: reactjs react-router

我先说小恩赐,先抱歉。

我搜索了一些类似的问题,但没有帮助。 无法弄清楚自己发生了什么,它几乎花了我1个小时。

我用最新的yeoman& amp;发电反应-的WebPack。

总是存在一些错误。在浏览器控制台中。

virtualenvwrapper

这里是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

2 个答案:

答案 0 :(得分:0)

检查文件名和导入语句是否具有正确的拼写。

pages.js应为 P ages.js
Indexpage.js应为Index P age.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>
  )

答案 1 :(得分:0)

您的pages.js有一个错误的类名。您不想将其称为IndexPage,而是将其称为页面,如下所示。

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