React Router v4 Aktive NavLink-Route

Question

Ich versuche, mein Projekt von v3 von react-router zu v4 von dem, was jetzt react-router-dom heißt, zu portieren. Jetzt treten die Probleme auf, wenn ich eine MenuBar-Komponente habe, die völlig von der Routing-Logik getrennt ist (wie man es erwarten würde), weil sie exakt die gleichen Links zeigt, wie immer der aktuelle Pfad auch sein mag. Nun, das hat alles gut mit v3 funktioniert, aber jetzt, wenn ich NavLink verwende, das die gleiche activeClassName Eigenschaft hat, wird die aktive Route nicht auf der NavBar aktualisiert, nur bei der Aktualisierung. Das scheint ein bisschen dumm zu sein, also muss es einen Weg geben.

export default @inject('ui') @observer class App extends Component { 
 
    render() { 
 
    return (
 
     <Router> 
 
     <div className={ styles.wrapper }> 
 
      <Sidebar /> 
 
      <main className={ `${styles.main} ${!this.props.ui.menuOpen && styles.closed}` }> 
 
      <Route exact path="/" component={ HomePage } /> 
 
      <Route path="/signup" component={ SignUpPage } /> 
 
      <Route path="/login" component={ LoginPage } /> 
 
      <Route path="/about" component={ AboutPage } /> 
 
      </main> 
 
      <footer className="site-footer"></footer> 
 
     </div> 
 
     </Router> 
 
    ); 
 
    } 
 
}

Die oben ist mein Haupt-App Logik und wie Sie die Routen verschachtelt sind zu sehen, aber der Router selbst wickelt sich um die gesamte Komponente.

Was sollte ich hinzufügen, damit sie wieder funktionieren? (Sie funktionieren ordnungsgemäß auf Seite aktualisieren)

Answer 1

Basierend auf Ihrer Verwendung der @observer Dekorateur, scheint es, dass Sie mobx-react verwenden. Die Sache zu verstehen über observer ist, dass es shouldComponentUpdate implementiert, um Renderleistung zu optimieren. Das sCU Aufruf wird die aktuellen und die nächsten Requisiten betrachten, und wenn es keinen Unterschied gibt, wird es nicht erneut rendern. Dies ist ein Problem, da React Router standardmäßig den Kontext zum Übergeben von Daten verwendet und auf Elementen beruht, die die aktualisierten Werte erneut rendern, aber observersCU hat keine Möglichkeit, Kontextänderungen zu erkennen.

Die Möglichkeit, dass Sie das umgehen können, besteht darin, das Objekt location als Prop zu der Komponente zu übergeben, die von observer umschlossen ist. Wenn sich der Standort ändert, wird observer den Unterschied erkennen und erneut rendern.

Sie können die blocked updates guide für weitere Informationen sehen.