Post List

2016년 10월 21일 금요일

react-router-tutorial #03 navigating with link

react-router 의 Link 에 대하여 알아 본다.

역시 이번 예제를 하기 위하여 03-navigating-with-link 디렉토리로 이동하고 미리 npm install을 실행한다.

그런 다음 아래 모듈을 먼저 살펴보자

[binrang@binrang 03-navigating-with-link]$ cd modules/
[binrang@binrang modules]$ vi App.js 
import React from 'react'
export default React.createClass({
  render() {
    return <div>Hello, React Router!</div>
  }
})



별거 없다.. 단순히 Hello 를 찍는 것 밖에 안보인다.
이 파일을 수정 해 보자.

import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
  render() {
    return ( 
        <div>
            <h1>React Router Tutorial</h1>
            <ul role="nav">
              <li><Link to="/about">About</Link></li>
              <li><Link to="/repos">Repos</Link></li>
            </ul>
        </div>
    )
  }
})

이제 npm start를 해보자.

[binrang@binrang 03-navigating-with-link]$ npm start
> tutorial@1.0.0 start /home/binrang/react/react-router-tutorial/lessons/03-navigating-with-link
> webpack-dev-server --inline --content-base .
 http://localhost:8080/
webpack result is served from /
content is served from /home/binrang/react/react-router-tutorial/lessons/03-navigating-with-link
Hash: 7575a63717a090a63b72
Version: webpack 1.13.2
Time: 2009ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.09 MB       0  [emitted]  main
chunk    {0} bundle.js (main) 1.03 MB [rendered]
    [0] multi main 40 bytes {0} [built]
    [1] (webpack)-dev-server/client?http://localhost:8080 3.97 kB {0} [built]
.......
  [297] ./modules/About.js 454 bytes {0} [built]
  [298] ./modules/Repos.js 454 bytes {0} [built]
webpack: bundle is now VALID.
>

이제 웹 화면을 확인 해 보자.

이렇게 링크가 걸린 화면을 생성되었다.

about 링크

repos 링크

아.. 이렇게 사용하는 거구만....
.

참고 URL : 03-navigating-with-link