20.5.1 라우트 컴포넌트 스플리팅하기

    현재 프로젝트에서 라우트를 위해 사용하고 있는 BluePage, RedPage, UserPage를 스플리팅해 주겠습니다.

    App.js

    import React from 'react';
    import { Route } from 'react-router-dom';
    import Menu from './components/Menu';
    import loadable from '@loadable/component';
    const RedPage = loadable(() => import('./pages/RedPage'));
    const BluePage = loadable(() => import('./pages/BluePage'));
    const UsersPage = loadable(() => import('./pages/UsersPage'));
    
    const App = () => {
      return (
        <div>
          <Menu />
          <hr />
          <Route path="/red" component={RedPage} />
          <Route path="/blue" component={BluePage} />
          <Route path="/users" component={UsersPage} />
        </div>
      );
    };
    
    export default App;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.