zoukankan      html  css  js  c++  java
  • The prop 'history' is marked as required in 'Router', but its value is 'undefined'.in Router

    代码如下 :
    var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={browserHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app'));

    报错信息如图:


    说明:当前react-router 版本号为^4.1.2

    解决办法 : 如果你用 react-router v4 你需要安装插件 react-router-dom 

    修改代码如下 :

    var React = require('react');
    var ReactDOM = require('react-dom');
    var {BrowserRouter,Route} = require('react-router-dom');
    var Main = require('Main');
    ReactDOM.render( <
    BrowserRouter>   <Route path="/" component={Main}></Route > </BrowserRouter>, document.getElementById('app'));

    拓展 1: 如果
    react-router 版本号为 3v 原路由配置没有问题

    拓展 2:
    ①react-router 版本号为 3v 子路由跳转代码如下
      
    var React = require('react');
    var ReactDOM = require('react-dom');
    var {Route, Router, IndexRoute, hashHistory} = require('react-router');
    var Main = require('Main');

    import Admin from './pages/admin/index.js';
    ReactDOM.render( <Router history={browserHistory}>   <Route path="/" component={Main}>
          <IndexRoute component={Admin.SendMess} />
       </Route> </Router>, document.getElementById('app'));

    ②react-router 版本号为 4v 子路由跳转
    完整代码如下

    // admin.js
    import React,{Component} from 'react';
    import ReactDOM from 'react-dom';
    import {render} from 'react-dom';
    import {
    IndexRoute, Redirect,
    browserHistory,
    Router, Link ,applyRouterMiddleware
    } from 'react-router';

    import { BrowserRouter, Route } from 'react-router-dom'

    window.URL_PREFIX = "";
    window.API_URL_PREFIX = "";

    import Admin from '../index.js';

    class App extends Component{
    getInitialState(){
    return null;
    }
    componentWillMount() {

    }
    render(){
    var self = this;
    return (
    <div>
    <Route exact path="/" component={Admin.Greeter} />
    <Route path="/test" component={Admin.test} />
    </div>
    );
    }
    }

    let init = function(){
    const ReactContainer = document.getElementById('root');
    if ( !ReactContainer ) return null;
    render(( <BrowserRouter>
    <Route path="/" component={App} />
    </BrowserRouter>)
    ,ReactContainer)
    }
    window.onload = init;

    参考文献 :https://stackoverflow.com/questions/43008036/the-prop-history-is-marked-as-required-in-router-but-its-value-is-undefine

         https://segmentfault.com/q/1010000009616045

         https://segmentfault.com/a/1190000009349377

     
     
     
  • 相关阅读:
    jQuery遍历div,判断是否为空,为空时执行某个操作
    ps中扩展画布的时候,不能选择扩展画布部分的颜色解决方法
    PS中缩放工具的细微缩放不可以使用的解决方法
    Excel的基础操作
    Word文档编辑
    人脸识别活体检测之张张嘴和眨眨眼——login.jsp
    人脸识别活体检测之张张嘴和眨眨眼——web.xml
    人脸识别活体检测之张张嘴和眨眨眼——readme
    maven用途、核心概念、用法、常用参数和命令、扩展
    [转载]ORACLE临时表的创建
  • 原文地址:https://www.cnblogs.com/lliuhh/p/7405213.html
Copyright © 2011-2022 走看看