2017-02-14 4 views
3

Ich denke, ich habe ein Problem mit Reagieren Router. Wie kann ich verhindern, dass der Reaktiv-Router eine zuvor gerenderte Seite neu rendert?Wie verhindere ich, dass der reaktivierte Router eine zuvor gerenderte Seite neu rendert?

I Router Code wie diese:

class App extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
      <NavBar/> 
 
      {this.props.children} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    (
 
     <Router history={hashHistory}> 
 
      <Route path="/" component={App}> 
 
       <IndexRoute component={Gateway} /> 
 
       <Route path="home" component={Gateway} /> 
 
       <Route path="categories" component={Categories} /> 
 
      </Route> 
 
     </Router> 
 
    ), document.getElementById('my-app') 
 
);

Als ich die Seite besucht, trifft es Index, bekam Gateway-Komponente erstellt. Dann klicke ich auf den Link "Kategorien" und die Kategorie-Komponente wurde gerendert. Wenn ich dann wieder auf "Home" klicke, wurde die Komponente Gateway neu gerendert. Sein Zustand wurde zurückgesetzt. Das ist wirklich frustrierend, da ich nicht herausfinden konnte, warum der Status zurückgesetzt wurde.

Gibt es dafür eine Lösung?

+0

Wenn Sie keine Statusverwaltung wie Redux verwenden, müssen Sie den richtigen Weg suchen, um den Status zwischen den Routen zu teilen, indem Sie nur React verwenden. Sehen Sie sich die Antwort in diesem Post an: http://stackoverflow.com/questions/41108701/reac-router-share-state-between-routes-without-redux oder Google etwas wie "reagiere Router-Share-Status zwischen Routen" – Jayce444

Antwort

1

Wenn ein beliebiger Status gespeichert werden soll, sollten Sie ihn irgendwo speichern, z. B. den Status der Komponente (oder den Redux-Status, wenn Sie redux verwenden).

In Reaktion können Sie die Funktion shouldComponentUpdate() innerhalb von Komponenten definieren, um zu erzwingen, dass React das DOM nicht erneut rendert. Aber im Fall des Reaktiv-Routers ist das DOM der ersten Route zerstört (nicht nur versteckt) und sollte daher erneut gerendert werden.

Verwandte Themen