陣營路由器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，它只能在路由器組件內部使用，而不能在路由器組件外部使用。