React로 My Home 만들기 (2) - React Route

이전 포스팅을 통해 프로젝트를 생성하고 기본 레이아웃을 구성하였습니다.
이번 포스팅에서는 React Route를 이용하여 Route를 설정하겠습니다.

1. 패키지 설치 및 디렉토리 생성

npm install react-router-dom
yarn add react-router-dom

1) 폴더 생성
- /src/routes

2) 파일 생성
- /src/routes/index.js : 라우트에 필요한 모든 컴포넌트를 한 파일로 관리
- /src/routes/router.js : 실제 라우트 설정 파일

1) index.js

1 2	export { default as home } from '../components/home'; export { default as about } from '../components/about';

- 앞으로 라우트에 필요한 컴포넌트 목록을 갖고 있을 파일입니다.

2) router.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import { home, about } from './index';
 
const Router = () => (
    <Switch>
        <Route exact path="/" component={home} />
        <Route path="/about" component={about} />
    </Switch>
);
 
 
export default Router;

- react-rotuer-dom 패키지를 이용하여 route를 설정합니다. exact를 path가 단 한글자도 틀리지 않고 정확하게 맞는 경우 사용합니다.

 

2. Route를 위한 Component 생성

- 아직은 구체적으로 어떤 컨텐츠를 넣을 지 생각하지 않았기 때문에 함수형 컴포넌트로 임시 생성하겠습니다.

1) 폴더 생성
- /src/components

2) 파일 생성
- /src/components/home.js : My home 프로젝트의 Main 페이지
- /src/components/about.js : 소개 페이지

import React from 'react';
const home = () => {
    return(
      <div>home</div>  
    );
};
 
export default home;

3. 프로젝트에 Route 설정하기

- /src/index.js에 browser router를 설정합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'antd/dist/antd.css';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';
 
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

- /src/App.js로 이동하여 각 메뉴에 Link를 설정하고 Content영역에 내용이 보이도록 해줍니다.

import { Link } from 'react-router-dom';
import Router from './routes/router'
...
        <Menu mode="inline" defaultSelectedKeys={['1']}>
          <Menu.Item key="1">
            <Link to="/">
              <HomeOutlined />
              <span>Home</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="2">
            <Link to='/about'>
              <UserOutlined />
              <span>About Me</span>
            </Link>
          </Menu.Item>
        </Menu>
...
        <StyledContent>
          <Router />
        </StyledContent>

 

home을 선택한 경우

about을 선택한 경우