react router 4.1 路由改变，页面没有变化

Question

最近学习react、react-router，有个<div>需要做一个跳转，不能用react-router的link来做。最后做出来的效果是路由改变了，但是页面并没有渲染，代码如下

import React,{ Component }  from 'react'
import {BrowserRouter as Router,Route,NavLink} from 'react-router-dom'
import About from './modules/About'
import Home from './modules/Home'
import { createBrowserHistory } from 'history'


const history = createBrowserHistory()

class MyRouter extends Component {

    constructor(props){
        super(props);
    }

    render() {

        return (
            <Router history={history}>
                <div>
                    <nav id="nav">
                        <ul className="new-container">
                            <li>
                                <div className="new-item new-icon-index" onClick={(e) => history.push("/home.html")}>
                                    <i className="new-icon new-icon-index-hover"></i>
                                    <span>首页</span>
                                </div>
                                <div></div>
                            </li>
                            <li className="new-no}">
                                <div className="new-item new-icon-report">
                                    <i className="new-icon new-icon-report-hover"></i>
                                    <span>about</span>
                                    <div className="se-menu">
                                        <NavLink to="/about1.html">about1</NavLink>
                                        <NavLink to="/about2.html">about2</NavLink>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </nav>
                    <div name="main" style={{'marginTop':'50px'}}>
                        <Route exact path="/home.html" component={Home}/>
                        <Route path="/about1.html" component={About1}/>
                        <Route path="/about2.html" component={About2}/>
                    </div>
                </div>
            </Router>
        );
    }
}

export default MyRouter;

about1、about2切换没有问题，但是切不回home去的，路由器是到home.html上了，但是页面没有刷上去，这是什么问题呢？
有个类似的问题：
https://segmentfault.com/q/10...
我在history.push("/home.html")换成this.props.history.push("/home.html")
报错Cannot read property 'push' of undefined，

Answer 1

1.路由不要加.html尾缀了，怪怪的写法，我没看过这样写路由路径的，可能哪里有大神写过这样的吧
2.我在history.push("/home.html")换成this.props.history.push("/home.html")
报错Cannot read property 'push' of undefined
我是引入prop-types

import PropTypes from 'prop-types'
static contextTypes = {
  router: PropTypes.object
}
//然后js中
//routerMap.USER_DETAILS 是配置好的路由路径
this.context.router.history.push(routerMap.USER_DETAILS)

试试有没有用，你的Home路由是exact匹配，应该要出内容才对。