最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】ReactJS出错:Warning Failed prop type The prop history is marked as required in Router but its value is undefined

ReactJS crifan 8052浏览 0评论

折腾:

【已解决】React中合并login.html和index.html成单个app.js

期间,用代码:

import React, { Component } from ‘react’;
import { Router, Route, IndexRoute, browserHistory } from ‘react-router’;
import Index from ‘./index/index’;
import Login from ‘./login/login’;
export default class App extends Component {
  state = {
    curUserInfo : {
      isLogin: false,
      name: ”
    }
  };
  constructor(props) {
      super(props);
      console.log(`App constructor`);
      console.log(this.state.curUserInfo);
  }
  render() {
    console.log(`App render`);
    // <IndexRoute component={Login}/>
    return (
      <Router history={browserHistory}>
        <Route path=’/’       component={Login}/>
        <Route path=’/index’  component={Index}/>
      </Router>
    );
  }
}

结果出错:

Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.
    in Router (created by App)
    in App
printWarning    @    warning.js:35
warning    @    warning.js:59
checkReactTypeSpec    @    checkReactTypeSpec.js:80
validatePropTypes    @    ReactElementValidator.js:151
createElement    @    ReactElementValidator.js:187
patchedCreateElement    @    patch.dev.js:164
render    @    app.js:69
render    @    createPrototypeProxy.js:44
(anonymous)    @    ReactCompositeComponent.js:796
measureLifeCyclePerf    @    ReactCompositeComponent.js:75
_renderValidatedComponentWithoutOwnerOrContext    @    ReactCompositeComponent.js:795
_renderValidatedComponent    @    ReactCompositeComponent.js:822
performInitialMount    @    ReactCompositeComponent.js:362
mountComponent    @    ReactCompositeComponent.js:258
mountComponent    @    ReactReconciler.js:46
performInitialMount    @    ReactCompositeComponent.js:371
mountComponent    @    ReactCompositeComponent.js:258
mountComponent    @    ReactReconciler.js:46
mountComponentIntoNode    @    ReactMount.js:104
perform    @    Transaction.js:140
batchedMountComponentIntoNode    @    ReactMount.js:126
perform    @    Transaction.js:140
batchedUpdates    @    ReactDefaultBatchingStrategy.js:62
batchedUpdates    @    ReactUpdates.js:97
_renderNewRootComponent    @    ReactMount.js:320
_renderSubtreeIntoContainer    @    ReactMount.js:401
render    @    ReactMount.js:422
(anonymous)    @    app.entry.js:17
(anonymous)    @    index.js?30838a1…:1856
__webpack_require__    @    vendor.bundle.js?30838a1…:711
fn    @    vendor.bundle.js?30838a1…:117
(anonymous)    @    client:3
(anonymous)    @    index.js?30838a1…:1800
__webpack_require__    @    vendor.bundle.js?30838a1…:711
webpackJsonpCallback    @    vendor.bundle.js?30838a1…:26
(anonymous)    @    index.js?30838a1…:1

如图:

Warning Failed prop type The prop history is marked as required in Router but its value is undefined

hashHistory stopped working in 4.0.0 · Issue #4752 · ReactTraining/react-router

对应的History已经移动到单独的库中了:

react-router/HashRouter.md at master · ReactTraining/react-router

react-router/BrowserRouter.md at master · ReactTraining/react-router

react-router/quick-start.md at master · ReactTraining/react-router

reactjs – The prop `history` is marked as required in `Router`, but its value is `undefined`. in Router – Stack Overflow

reactjs – React Router failed prop ‘history’, is undefined – Stack Overflow

How do I resolve history is marked required, when value is undefined? | Treehouse Community

Can’t get code to work although code perfectly matches. | Treehouse Community

➜  rse_web git:(master) ✗ npm install react-router-dom
npm WARN [email protected] requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN [email protected] requires a peer of react@^15.6.1 but none was installed.
added 1 package in 10.067s

【总结】

react-router v4中代码逻辑已经改了

之前是:

import { Router, Route, IndexRoute, browserHistory } from ‘react-router’;
<Router history={browserHistory}>

现在是:

import {
  BrowserRouter as Router,
  Route,
  Link
} from ‘react-router-dom’;
      <Router>
      </Router>

记得要去安装对应的:

npm install react-router-dom

转载请注明:在路上 » 【已解决】ReactJS出错:Warning Failed prop type The prop history is marked as required in Router but its value is undefined

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.193 seconds, using 22.13MB memory