折腾：
【已解决】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 – 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