Reagieren Router 4 nicht aktualisiert, wenn die Kinder prop auf history.push

Question

Ich habe dieses Stück Code verwendet:

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

Allerdings, wenn ich versuche Standort entweder mit history.push oder von reagieren-Router schieben sich ändern -redux Ich kann den Browserpfad aktualisiert sehen, aber der Inhalt wird nicht aktualisiert, es zeigt den ursprünglichen Pfadinhalt. Ich habe auch bemerkt, dass immer wenn ich den Browser aktualisiere, ich den korrekten Inhalt sehen kann, der sich auf den Pfad bezieht.

Wenn ich den Code in den folgenden ändern, werden sowohl der Browserpfad als auch der Inhalt entsprechend wie erwartet aktualisiert, meine Frage lautet: Warum verhält es sich anders? wenn meiner Meinung nach beide Codes dasselbe tun.

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: Ich fügte hinzu, die Push-Methode auf den Quellcode. Dies ist das Stück Code, ich bin mit der App-Komponente exportieren:

import {withRouter} from 'react-router'; 

export default withRouter(App); 

Answer 1

Dies ist der Code, den ich lief und es läuft gut. Können Sie bitte überprüfen, ob ich etwas in meinem Code ändern muss, um Ihr Problem zu reproduzieren?

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: Von dem, was ich verstanden habe, wollen Sie in der Lage sein, zu der Benutzerseite zu navigieren, wenn die Änderung Link geklickt wird. Die richtige Vorgehensweise ist die Verwendung des NavLink-Steuerelements. Dies würde nicht die Verwendung von withRouter HOC erfordern, die nur innerhalb einer Router-Komponente und nicht außerhalb davon verwendet werden sollte.