Post List

2016년 10월 24일 월요일

react-router-tutorial #09 index links

이번 예제를 위하여 09-index-links 디렉토리로 이동 한 후 npm install을 실행 해 놓는다.

이번에는 네비게이션에 Home으로 가는 것을 구현하는 예제이다.

1. App.js 파일에 Home에 대한 Link 를 추가합니다.



[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/09-index-links/modules
[binrang@binrang modules]$ vi App.js 
import React from 'react'
import NavLink from './NavLink'
export default React.createClass({
  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><NavLink to="/">Home</NavLink></li>
          <li><NavLink to="/about">About</NavLink></li>
          <li><NavLink to="/repos">Repos</NavLink></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

저장하고 빠져 나온 후 npm start를 한 후 브라우저로 확인한다.
홈 화면에 Home에 대한 링크가 형성되었다.

어디를 가도 홈으로 갈 수 있다.

홈...홈...

맨 하위에서도 홈을 갈 수 있다.

2. App.js 에 IndexLink 를 이용하여 구현해 본다.

[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/09-index-links/modules
[binrang@binrang modules]$ vi App.js 
import React from 'react'
import NavLink from './NavLink'
import { IndexLink } from 'react-router'
export default React.createClass({
  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>
          <li><NavLink to="/about">About</NavLink></li>
          <li><NavLink to="/repos">Repos</NavLink></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

이번에도 웹 화면을 확인해보면 첫번째 구현한 것과 같은 화면을 얻을 수 있다.


3. 링크에 옵션을 하나 더 추가 해 보자

          <li><IndexLink to="/" activeClassName="active" onlyActiveOnIndex={true}>Home</IndexLink></li>

이 옵션은 하나의 링크를 활성화하는 기능이다.

<li><NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink></li>

이렇게 해도 같은 결과를 얻을 수 있다.

참고 URL : 09-index-links