コード分割チャンクを使用した動的ルートは機能していないようです

Question

私はコード分割で反応ルータを使用しています。 AuthenticatedRouteのような動的ルートはうまく機能しないようです。

ユーザーがログに、Aboutルートに行くと戻って（ページを更新せずに）Aboutルートに入った場合About経路コード分割チャンクを交換/更新し、それを取得していないため、何も表示されませんコンポーネントがインポートされたAboutがありません。

コード：

ルート

import React from 'react'; 
import { Route } from 'react-router-dom' 

import asyncComponent from "./AsyncComponent"; 
import AuthenticatedRoute from "./AuthenticatedRoute"; 

const AsyncHome = asyncComponent(() => import("../../containers/Home/Home")); 
const AsyncAbout = asyncComponent(() => import("../../containers/About/About")); 
const AsyncLogin = asyncComponent(() => import("../../containers/Login/Login")); 

const Routes =() => (
    <main> 
    <Route exact path="/" component={AsyncHome} /> 
    <AuthenticatedRoute exact path="/about" component={AsyncAbout} /> 
    <Route exact path="/login" component={AsyncLogin} /> 
    </main> 
) 

export default Routes 

AuthenticatedRoute

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { Route, Redirect } from 'react-router-dom'; 

class AuthenticatedRoute extends Component { 
    render() { 
    const { props } = this; 

    const { component: C, user, ...newProps } = props; 

    const renderComponent = (routeProps) => { 
     return user ? <C {...routeProps} /> : <Redirect to="/login" />; 
    } 

    return <Route {...newProps} render={renderComponent} /> 
    } 
} 

const mapStateToProps = state => ({ 
    user: state.auth.user 
}) 

const mapDispatchToProps = dispatch => bindActionCreators({ 
}, dispatch) 

export default connect(
    mapStateToProps, 
    mapDispatchToProps, 
)(AuthenticatedRoute) 

問題がチャンクの発生と関連しているように見えます。ユーザがログインせずにAboutルートチャンクが作成された場合、そのチャンクにはAboutコンポーネントがありません。ログイン後にページを更新すると、AboutルートチャンクにはAboutのコンポーネントがあり、すべて正常に動作します。

Answer 1

ユーザーがログインしていないときには、このif文の一部になるため、コンポーネントをレンダリングしないと思います。

return user ? <C {...routeProps} /> : <Redirect to="/login" />;