阵营路由器4利用儿童history.push

Question

我有这样一段代码上时支撑不更新：

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

然而，当我尝试通过使用history.push要么改变位置或从推起反应路由器-redux我可以看到更新的浏览器路径，但内容没有更新，它显示了原始路径内容。我还注意到，无论何时刷新浏览器，我都能看到与路径相关的正确内容。

当我将代码更改为以下内容时，浏览器路径和内容都会按照预期进行相应更新，我的问题是：为什么它的行为不同？如果我认为这两个代码都做同样的事情。

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

编辑： 我添加到源代码中的推送方法。这是我用于导出应用程序组件的代码片段：

import {withRouter} from 'react-router'; 

export default withRouter(App); 

Answer 1

这是我运行的代码，它运行良好。你能检查我的代码中是否有任何需要改变的地方来重现你的问题吗？

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')); 

编辑：从我的理解，你希望能够在点击更改链接时，浏览到用户页面。正确的方法是使用NavLink控件。这不需要使用withRouter HOC，它只能在路由器组件内部使用，而不能在路由器组件外部使用。