React Router hält Komponente beim Drücken auf aktiven Link unmounting

Question

Ich habe eine einfache App mit Reagieren Router v4.0. Es gibt Home und Über Links, die gedrückt werden können und entsprechende Route wird auf einer Seite gerendert werden.

Ich bemerkte, dass, wenn sie auf einem bereits aktiven Startseite Link zweimal oder mehr klicken - Startseite Komponente wird wieder montiert jedes Mal, das unerwartete Verhalten ist.

Dies geschieht nur, wenn Route Element nicht direkt in Router ist, aber in einer Wrapper-Funktion ist App. Ex: https://codesandbox.io/s/wwnxxqy4m5 (drücken Sie auf Home Link und überprüfen Konsolenprotokolle)

const Root =() => (
    <Router> 
    <App /> 
    </Router> 
); 

Wenn ich Routen setzen direkt an Router Komponente Home ist nicht abgehängt jedes Mal.

const Root =() => (
    <Router> 
    <div> 
     <ul> 
     <li><NavLink to="/">Home</NavLink></li> 
     <li><NavLink to="/about">About</NavLink></li> 
     </ul> 

     <hr/> 

     <Route exact path="/" component={withRouter(Home)}/> 
     <Route path="/about" component={withRouter(About)}/> 
    </div> 
    </Router> 
); 

Hat jemand Ideen, warum Aushängen von Startseite gezwungen wird, wenn Wrapper-Funktion verwendet?

Answer 1

Der Grund dafür, dass Ihre Komponente wieder eingehängt und ausgehängt wird, ist, dass Sie mit der Route immer eine neue Komponente zurückgeben, mit component={withRouter(Home)}. Jedes Mal, wenn ein Routenpfad übereinstimmt, überprüft er die Property der Komponente und jedes Mal, wenn eine neue Instanz Ihrer Home-Komponente erstellt und zurückgegeben wird.

In Ihrem Fall, dass Sie nicht wirklich benötigen, um Ihre Komponente mit withRouter wickeln, da die Komponente direkt von der Strecke und erhalten die Route params gemacht wird. Jedoch In einem Fall, wenn Sie müssen mit withRouter wickeln, nur eine einzigen Instanz einer Komponente erstellen und dann exportieren und diese Instanz importieren und nicht ein neues erstellen, jedes Mal

Working CodeSandbox