React로 블로그 만들기 #3

React로 블로그 만들기 #3

 - Router 설정(2) -

1. src/Components 파일 생성

- About.js :  소개 페이지

- Board.js : 다른 사람들이 쓴 글을 볼 수 있는 게시판

- MyBoard.js : 내 글보기

- MyPage.js : 내 정보 관리

- Login.js : 로그인 페이지

2. src/Routes/index.js

- 위에서 만든 컴포넌트 추가

export { default as Home } from '../Components/Home';

export { default as Login } from '../Components/Login';

export { default as About } from '../Components/About';

export { default as Board } from '../Components/Board';

export { default as MyBoard } from '../Components/MyBoard';

export { default as MyPage } from '../Components/MyPage';

3. src/Routes/Router.js

- 각 경로에 컴포넌트 설정

import React from 'react';

import { Switch, Route } from 'react-router-dom';

import { Home, About, Login, Board, MyBoard, MyPage } from './index';

const Router = () => (

<Switch>

<Route exact path="/" component={Home} />

<Route path="/about" component={About} />

<Route path="/login" component={Login} />

<Route path="/board" component={Board} />

<Route path="/myboard" component={MyBoard} />

<Route path="/mypage" component={MyPage} />

</Switch>

);

export default Router;

4. src/Layout/Navigation.js

- 기존 메뉴를 소개, 게시판, 내 글보기, 마이페이지로 수정

- Link 객체를 통해 다른 라우트 경로로 이동할 수 있음

- 각 메뉴에 라우터에서 설정한 경로로 설정

import React, { Component } from 'react';

import styled from 'styled-components';

import { Link } from 'react-router-dom';

class Navigation extends Component {

render() {

return (

<Nav>

<NavList>

<NavItem><Link to='/about'>소개</Link></NavItem>

<NavItem><Link to='/board'>게시판</Link></NavItem>

<NavItem><Link to='/myboard'>내 글보기</Link></NavItem>

<NavItem><Link to='/mypage'>마이페이지</Link></NavItem>

</NavList>

</Nav>

);

}

}

5. 결과 확인

- 각 메뉴마다 하이퍼링크가 걸려있는 것을 볼 수 있다.

- css를 통해 밑줄이나 색 변경 등을 할 수 있다. (나중에 적용)

1) 소개

2) 게시판