react-router@4.2.0嵌套的路由用this.props.history.push()路由改变了但是页面却没更新

Question

在外层路由用this.props.history.push()可以跳转
在内层的路由中用this.props.history.push()，网页的路由地址变化了，但页面却不更新，但是用Link标签就更新。
不知道问题在哪儿，痛苦！

外层路由：

import React from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect,
    IndexRoute,
    BrowserRouter,
    Switch,
    browserHistory
} from 'react-router-dom'
const supportsHistory = 'pushState' in window.history

import Login from '../js/pages/login';
import Main from '../js/pages/main';
import Err from '../js/pages/err';


// 适配移动端
import MediaQuery from 'react-responsive';


export default class RouteRoot extends React.Component {
    updateHandle() {
        console.log('每次router变化之后都会触发')
    }
    render() {
        return (
            <div>
                <MediaQuery query='(min-device-width: 1224px)'>
                    <BrowserRouter forceRefresh={!supportsHistory}  basename="/" forceRefresh={!supportsHistory} history={browserHistory}>
                        <Switch>
                            <Route exact path="/" component={Login}/>
                            <Route exact path="/main" component={Main} />
                            <Route exact path="*" component={Main}/>
                        </Switch>
                    </BrowserRouter>
                </MediaQuery>
                <MediaQuery query='(max-device-width: 1224px)'>
                    <div>移动端</div>
                </MediaQuery>
            </div>
        )
    }
}

内层路由：

import React from 'react';
import {
    Route,
    Redirect,
    IndexRoute,
    BrowserRouter,
    Switch,
    browserHistory
} from 'react-router-dom';
import Err from '../js/pages/err';
import Main from '../js/pages/main';

import Home from '../js/components/home/home';
import OrderStatus from '../js/components/orderManage/orderStatus';
import OrderSearch from '../js/components/orderManage/orderSearch';

import Goods from '../js/components/shopManage/goods';
import Banner from '../js/components/shopManage/banner';

import Option1 from '../js/components/nav1/option1';
import Option2 from '../js/components/nav1/option2';
import Option3 from '../js/components/nav1/option3';

// 适配移动端
import MediaQuery from 'react-responsive';

export default class RouteMain extends React.Component {
    updateHandle() {
        console.log('每次router变化之后都会触发')
    }
    render() {
        return (
            <div>
                <MediaQuery query='(min-device-width: 1224px)'>
                        <Switch>
                            <Route exact path="/main" component={Home} />
                            <Route exact path="/main/orderManage/orderStatus/:params" component={OrderStatus} />
                            <Route exact path="/main/orderManage/orderSearch/:params" component={OrderSearch} />

                            <Route exact path="/main/shopManage/goods/:params" component={Goods} />
                            <Route exact path="/main/shopManage/banner/:params" component={Banner} />

                            <Route exact path="/main/nav1/option1/:params" component={Option1} />
                            <Route exact path="/main/nav1/option2" component={Option2} />
                            <Route exact path="/main/nav1/option3" component={Option3} />
                            <Route exact path="/main/*" component={Err}/>
                        </Switch>
                </MediaQuery>
                <MediaQuery query='(max-device-width: 1224px)'>
                    <div>移动端</div>
                </MediaQuery>
            </div>
        )
    }
}

外层路由用this.props.history.push('/main')都能正常跳转，withRouter我也加了，就是内层路由不行。
export default withRouter(connect(mapStateToProps)(Main));

Answer 1

看到没有回答，我来解决一下，把内嵌路由的配置最外层的Router去掉就可以了

Answer 2

问题解决了吗