코드 분할 덩어리가있는 동적 경로가 작동하지 않는 것 같습니다.

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" />;