リアクションルータは、アクティブリンクを押している間にアンマウントコンポーネントを保持します。

Question

私はリアクションルータv4.0で簡単なアプリを持っています。 ホームと約リンクを押して適切なルートをページに表示します。

私はすでにアクティブホームリンク2倍以上をクリックしたときに気づい - ホームコンポーネントが予期しない動作で再マウントするたびに取得します。

これは、Routerに直接は入っていないが、ラッパー関数Appにある場合にのみ発生します。例：https://codesandbox.io/s/wwnxxqy4m5（プレスホームリンクとコンソールログを確認してください）

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

私はRouterコンポーネントHomeに直接ルートを置く場合は毎回アンマウントではありません。

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

誰もがラッパー関数を使用する場合ホームのアンマウントを強制されている理由、アイデアを持っていますか？

Answer 1

コンポーネントが再度マウントされ、アンマウントされるのは、ルートに新しいコンポーネントが毎回返されるためです（component={withRouter(Home)}）。したがって、ルートパスが一致するたびにコンポーネントのpropをチェックし、ホームコンポーネントの新しいインスタンスが作成されて返されるたびにチェックします。

実際にコンポーネントがwithRouterでラップする必要はありません。コンポーネントはルートによって直接レンダリングされ、Routeパラメータを受け取るためです。しかし、あなたがwithRouterでラップする必要がある場合には、単にコンポーネントの単一のインスタンスを作成し、輸出し、そのインスタンスをインポートして新しい毎回あなたの答えShubhamため

Working CodeSandbox