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