リアクタールーターv4 NavLinkアクティブルート

Question

私のプロジェクトで、v3をreact-routerからv4に移植して、現在はreact-router-domとしています。これで問題は、MenuBarコンポーネントがあるときに発生します。これは、現在のパスが何であっても正確に同じリンクを表示するため、ルーティングロジックとは完全に別です（予想通り）。今はv3ですべてうまく動作しましたが、今度は同じactiveClassNameプロパティを持つNavLinkを使用している場合、アクティブなルートはNavBarで更新されず、更新時にのみ更新されます。これはちょっとばかげているようですので、これを回避する手段が必要です。

上記を

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

は私のメインのアプリケーションロジックであり、あなたが見ることができるようにルートがネストされているが、ルータ自体は、コンポーネント全体を包みます。

もう一度動作させるにはどうすればよいですか？ （これらはページの更新時に正しく機能します）

Answer 1

@observerデコレータの使用状況に基づいて、mobx-reactを使用しているようです。 observerについて理解することは、レンダリングのパフォーマンスを最適化するためにshouldComponentUpdateを実装することです。そのsCUコールは現在と次の小道具を見て、違いがなければ再レンダリングしません。デフォルトでは、React Routerはコンテキストを使用してデータを渡し、要素を再レンダリングして更新された値を取得するため、observerのsCUはコンテキストの変更を検出できません。

これを回避する方法は、で囲まれたコンポーネントの小道具としてlocationオブジェクトを渡すことです。次に、場所が変更されると、observerのshouldComponentUpdateがその違いを検出して再レンダリングします。

詳細については、blocked updates guideをご覧ください。