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