The react-router@4.2.0 nested route has been changed with the this.props.history.push () route, but the page has not been updated

using this.props.history.push () in outer layer routing can jump to
the routing address of the this.props.history.push (), web page in the inner layer routing has changed, but the page is not updated, but it is updated with the Link tag.
I don"t know what the problem is, pain!

Outer routing:

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>
        )
    }
}

Inner routing:


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>
        )
    }
}

the outer layer routing can jump normally with this.props.history.push ("/ main"). I also added withRouter, but the inner layer routing is not good.
export default withRouter (connect (mapStateToProps) (Main));