コンポーネントのアンマウントの遅れ

Question

アプリケーション全体に存在するため、ナビゲーションおよびサイドバーコンポーネントをApp.jsファイル内で使用していますので、再レンダリングする必要はありませんが、これらの2つのコンポーネントは今

export default class App extends React.Component { 
    render() { 
    return (
     <div className={cx('App')}> 
     {(this.props.authenticated) ? (<Navigation />) : null} 
     {this.props.children} 
     {(this.props.authenticated) ? (<Sidebar />) : null} 
     </div> 
    ) 
    } 
} 

それはもはや使用することを意味しないルートが変更this.props.children変化として問題、（つまり、子どもたちは通常、ページのコンポーネントである）私はログアウトページを取得、：ユーザーでログインし、したがって、アプリケーションコンポーネントは次のようになりますサイドバーとナビゲーションコンポーネントを参照してください。最初は子どもが消えてからサイドバーとナビゲーションが表示されますが、これはやや不快なUI遷移につながり、強制的に強制する方法があるかどうかを知りたいと思いますonmentsは同期してアンマウントされますか？

Answer 1

このようなことをお試しください。

export default class App extends React.Component { 
    render() { 
    if(this.props.authenticated){ 
     return (
     <Navigation /> 
     {this.props.children} 
     <Sidebar /> 
    ) 
    }else{ 
     return ({this.props.children}) 
    } 

    } 
}