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

     
     
     
  • 相关阅读:
    使用keepalived监控tomcat 达到双机热备
    nginx tomcat负载均衡 使用redis session共享
    Java线程安全和非线程安全
    Log4J日志配置详解
    使用java mail的网易smtp协议 发送邮件
    JavaScript-DOM(3)
    JavaScript-DOM(2)
    JavaScript-DOM(1)
    BOM简介
    JavaScript(数组、Date、正则)
  • 原文地址:https://www.cnblogs.com/lliuhh/p/7405213.html
Copyright © 2011-2022 走看看