라우터 및 페이지 설정하기

Last Edited: Jun 25, 2019 12:02 PM created: Jun 25, 2019 11:08 AM

현재 하고 있는 프로젝트는 'Ant Design'을 사용해서 개발하고 있다. Ant Design은 umi와 dva을 통해 프로젝트를 관리한다. Dva는 프론트엔드 프레임워크로 redux, redux-saga, react-router을 기반으로 만들어졌다.

Ant Dsign에서 페이지를 추가하려면 라우터를 설정하고 컴포넌트를 생성하여 연결해줘야 한다. 연결이라고 함은 직접 컴포넌트를 불러와서 라우터에 등록해주는 것이 아니라, 라우터에 컴포넌트의 위치를 작성해주면 된다.

1. 라우터 설정

라우터 설정을 통해 URL로 접속할 수 있다. 기존 (config/router.config.js)

routes: [
  // dashboard
  {
    path: '/',
    redirect: '/dashboard/',
  },
  {
    path: '/dashboard',
    name: 'dashboard',
    icon: 'dashboard',
    component: './KT_Dashboard/Dashboard',
  },
  {
    path: '/dashboard/center/:id',
    name: 'center',
    component: './KT_Dashboard/DashboardSubWrapper',
    hideInMenu: true,
    },
    ...

새롭게 추가 (config/router.config.js)

{
  path: '/dashboard/headquarter/:id',
  name: 'headquarter',
  component: './KT_Dashboard/Headquarter',
  hideInMenu: true,
},

2. 컴포넌트 추가

라우터에 해당하는 컴포넌트를 추가한다.

/src/pages/KT_Dashboard/Headquarter.js

  import React from 'react';
  export default () => <div>headquarter</div>;

3. 라우터 관련하여 locale 추가

페이지를 등록하려면 해당 페이지의 제목을 등록해야 한다.

/src/locales/ko-KR.js

  'menu.headquarter': '본부뷰',

/src/locales/en-US.js

  'menu.headquarter': 'Headquarter',

4. 결과

새롭게 등록한 경로로 이동하면 추가된 컴포넌트를 확인할 수 있다.