React Router v4 NavLink aktif rotası

Question

Şu anda react-router-dom numaralı telefonun v4'ü için react-router numaralı v3'ü kullanarak projemi çekmeye çalışıyorum. Şimdi, bir yönlendirme mantığından (beklediğiniz gibi) tamamen ayrı olan bir MenuBar bileşenine sahip olduğumda sorunlar ortaya çıkıyor çünkü geçerli yol ne olursa olsun aynı bağlantıları gösterecektir. Şimdi bu tüm v3 ile güzel çalıştı, ama şimdi aynı activeClassName özelliğine sahip NavLink özelliğini kullandığımda, etkin rota yalnızca yenileme sırasında NavBar'da güncelleştirilmez. Bu biraz aptalca görünüyor, bu yüzden bunun bir yolu olmalı.

yukarıda

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

benim ana Uygulama mantığı ve gördüğünüz gibi yolları iç içe, ancak Yönlendirici kendisi tam komponent sarar.

Tekrar çalıştırmaları için neleri eklemeliyim? (Sayfa yenileme sırasında düzgün çalışıyorlar)

Answer 1

@observer dekoratörünün kullanımına bağlı olarak, mobx-react kullanıyorsunuz. observer hakkında anlaşılması gereken şey, görüntü işleme performansını optimize etmek için shouldComponentUpdate uygular. sCU numaralı çağrı mevcut ve bir sonraki aksesuara bakacak ve eğer bir fark yoksa, tekrar gösterilmeyecek. Bu bir sorundur, çünkü Reaktif Yönlendirici varsayılan olarak verileri iletmek için bağlamı kullanır ve güncellenen değerleri almak için yeniden oluşturma işlemlerine dayanır, ancak observer 'sCU bağlam değişikliklerini algılamanın bir yolu yoktur.

Bu şekilde elde edebileceğiniz yol, location nesnesini, observer tarafından sarılmış olan bileşene bir destek olarak geçirmektir. Daha sonra, konum değiştiğinde, observer 'shouldComponentUpdate, farkı algılar ve yeniden oluşturur.

Daha fazla bilgi için blocked updates guide'u görebilirsiniz.