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

最后发布: 2016-08-08 14:16:18


问题

我会说一点小礼,抱歉。

我搜索了一些类似的问题,但没有帮助。 我不知道自己会发生什么,几乎花了我一个小时。

我从最新的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>
        )
    }
}
reactjs react-router
回答

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

pages.js应该是P ages.js
Indexpage.js应为Index P age.js

或在import语句中更改它。区分大小写。

文档说您必须使用主路由器/来包装路由

  <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>
  )


回答

您的pages.js的类名错误。 与其将其称为IndexPage,还不如将其称为Pages,如下所示。

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