Post List

2016년 10월 24일 월요일

react-router-tutorial #05 active links

react-router 의 active link를 알아보는 시간이다.

예제를 위하여 05-active-links 디렉토리로 이동하고 npm install 을 실행해 놓자.

npm start를 해 보면 전 시간에 했던 예제의 완성본이 실행되고 있는 것을 확인 할 수 있을 것이다.

이번 예저는 링크를 클릭 할 경우 방문 페이지의 링크 색이 변하는 것을 확인 하는 것이다.

이제 코드를 수정을 해 보자.

[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/05-active-links/modules
[binrang@binrang modules]$ vi App.js 
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>
        {this.props.children}
      </div>
    )



이 코드를 다음과 같이 수정한다.

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" activeStyle={{ color: 'red' }}>About</Link></li>
          <li><Link to="/repos" activeStyle={{ color: 'red' }}>Repos</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

npm start를 하고 브라우저를 보면 아래 그림과 같이 클릭한 링크가 붉은 색으로 표시되는 것을 확인할 수 있다.

홈 화면

About를 클릭했을 때 붉은 색으로 표시

Repos를 클릭했을 때 붉은 색으로 표시

이제 또 코드를 수정해 보자.

[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/05-active-links/modules
[binrang@binrang modules]$ vi App.js 
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" activeClassName="active">About</Link></li>
          <li><Link to="/repos" activeClassName="active">Repos</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

activeStyle 을 activeClassName으로 바꾸고 active라는 CSS를 정의하는 방식이다.

상위 디렉토리의 index.html 코드를 수정하자.

[binrang@binrang 05-active-links]$ pwd
/home/binrang/react/react-router-tutorial/lessons/05-active-links
[binrang@binrang 05-active-links]$ vi index.html 
<!doctype html public "storage">
<html>
<meta charset=utf-8/>
<title>My First React Router App</title>
<div id=app></div>
<script src="bundle.js"></script>

이 파일에 아래와 같이 추가하자.

<!doctype html public "storage">
<html>
<meta charset=utf-8/>
<title>My First React Router App</title>
<link rel="stylesheet" href="index.css" />
<div id=app></div>
<script src="bundle.js"></script>

그 다음은 index.css 파일을 만들고 css 코드를 추가하자.

[binrang@binrang 05-active-links]$ pwd
/home/binrang/react/react-router-tutorial/lessons/05-active-links
[binrang@binrang 05-active-links]$ vi index.css
.active {
  color: green;
}

webpack 이 자동으로 실행된 것을 확인 할 수 있을 것이다.(npm start를 죽였다면 다시 실행해 보자.)

그리고 브라우저를 확인해보면 링크가 녹색으로 변한 것을 확인 할 수 있다.

About를 방문하면 링크가 녹색으로 변한다.

Repos를 방문하면 링크가 녹색으로 변한다.

이번에는 모듈 밑에 파일을 아래와 같이 추가 해 보자

[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/05-active-links/modules
[binrang@binrang modules]$ vi NavLink.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
  render() {
    return <Link {...this.props} activeClassName="active"/>
  }
})

App.js 파일을 아래와 같이 수정한다.

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

즉 NavLink.js에 react-router를 import하고 App.js 에서는 NavLink를 import 했다.
이제 브라우저에서 확인해보면 같은 결과를 얻은 것을 확인 할 수 있다.

About를 방문하면 녹색으로 변한다.

Repos를 방문하면 녹색으로 변한다.

이제 active link에 대해서 확인 했다.

참고 URL : 05-active-links