在history.push上使用children prop时，react路由器4未更新

Question

I have this piece of code:

class Base extends Component {
  changeRoute = () => {
    // after this, address bar gets updated but I can't see the Users
    // component, only Home component.
    this.props.history.push('/users');
  }

  render() {
    return (
      <div>
        <MyBar />
        {this.props.children}
      </div>
    )
  }
}

class App extends Component {
  render() {
    return (
      <Router>
        <Base>
          <a onClick={this.changeRoute}>Change</a>
          <Route path="/home" component={Home} />
          <Route path="/users" component={Users} />
        </Base>
      </Router>
    )
  }
}

However, when I try to change location by either using history.push or push from react-router-redux I can see the browser path updated but the content is not updating, it shows the original path content. I also noted that whenever I refresh the browser I can see the correct content related to the path.

When I change the code to the following, both the browser path and the content updates accordingly as expected, my question is: Why is it behaving different? if in my opinion both codes do the same thing.

class Base extends Component {
  render() {
    return (
      <MyBar />
    )
  }
}

class App extends Component {
  changeRoute = () => {
    // after this, address bar and component are updated as expected.
    this.props.history.push('/users');
  }
  render() {
    return (
      <Router>
        <div>
          <Base />
          <a onClick={this.changeRoute}>Change</a>
          <Route path="/home" component={Home} />
          <Route path="/users" component={Users} />
        </div>
      </Router>
    )
  }
}

Edit: I added to the source code the push method. This is the piece of code I'm using to export the App component:

import {withRouter} from 'react-router';

export default withRouter(App);

Answer 1

This is the code I ran and it is running fine. Can you please check whether there is anything I need to change in my code to reproduce your issue?

import React from 'react';
import ReactDOM from 'react-dom';
import {NavLink, BrowserRouter,Route} from 'react-router-dom';
class Base extends React.Component {
    render() {
      return (
        <div>
          <div>MyBar</div>
          {this.props.children}
        </div>
      )
    }
  }

  class App extends React.Component {
    render() {
      return (
        <BrowserRouter>
          <Base>
            <NavLink to="/users">Change</NavLink>
            <Route path="/home" render={()=>"Home"} />
            <Route path="/users" render={()=>"Users"} />
          </Base>
        </BrowserRouter>
      )
    }
  }

ReactDOM.render(<App />, document.getElementById('root'));

Edit: From what I understood, you want to be able to navigate to the user page when the change link is clicked. The correct way to do it is using the NavLink control. This would not require the use of withRouter HOC which should only be used inside a Router component and not outside it.